@pedidopago/ui 1.7.26 → 1.8.0
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/components/Alert/alert.test.js +1 -85
- package/dist/components/Alert/index.js +1 -63
- package/dist/components/Alert/styles.js +1 -32
- package/dist/components/Avatar/avatar.test.js +1 -67
- package/dist/components/Avatar/index.js +1 -94
- package/dist/components/Avatar/styles.js +1 -51
- package/dist/components/Badge/badge.test.js +1 -71
- package/dist/components/Badge/index.js +2 -43
- package/dist/components/Badge/styles.js +1 -33
- package/dist/components/Button/Button.test.js +1 -154
- package/dist/components/Button/index.js +1 -87
- package/dist/components/Button/styles.js +1 -112
- package/dist/components/Card/card.test.js +1 -30
- package/dist/components/Card/index.js +1 -44
- package/dist/components/Card/styles.js +1 -16
- package/dist/components/CheckboxInput/checkbox-input.test.js +1 -170
- package/dist/components/CheckboxInput/components/MultipleCheckbox.js +1 -205
- package/dist/components/CheckboxInput/index.js +1 -94
- package/dist/components/CheckboxInput/styles.js +1 -34
- package/dist/components/ChoiceList/index.d.ts +6 -0
- package/dist/components/ChoiceList/index.d.ts.map +1 -0
- package/dist/components/ChoiceList/index.js +1 -0
- package/dist/components/ChoiceList/styles.d.ts +22 -0
- package/dist/components/ChoiceList/styles.d.ts.map +1 -0
- package/dist/components/ChoiceList/styles.js +1 -0
- package/dist/components/ChoiceList/types.d.ts +24 -0
- package/dist/components/ChoiceList/types.d.ts.map +1 -0
- package/dist/components/ChoiceList/types.js +1 -0
- package/dist/components/CollapseCard/ExpandButton/index.js +1 -40
- package/dist/components/CollapseCard/ExpandButton/styles.js +1 -16
- package/dist/components/CollapseCard/expand-button.test.js +1 -161
- package/dist/components/CollapseCard/index.js +1 -98
- package/dist/components/CollapseCard/styles.js +1 -26
- package/dist/components/ColorPicker/colorpicker.test.js +1 -64
- package/dist/components/ColorPicker/components/ColorHue.js +1 -44
- package/dist/components/ColorPicker/components/ColorInput.js +1 -63
- package/dist/components/ColorPicker/components/ColorPickerBox.js +1 -52
- package/dist/components/ColorPicker/components/ColorPointer.js +1 -25
- package/dist/components/ColorPicker/components/ColorSelector.js +1 -107
- package/dist/components/ColorPicker/hooks/useCachedCallback.js +1 -16
- package/dist/components/ColorPicker/hooks/useHsva.js +1 -53
- package/dist/components/ColorPicker/index.js +1 -93
- package/dist/components/ColorPicker/styles.js +1 -46
- package/dist/components/ColorPicker/utils/checkers.js +1 -55
- package/dist/components/ColorPicker/utils/conversors.js +2 -243
- package/dist/components/ColorPicker/utils/parsers.js +10 -108
- package/dist/components/ComposeIcon/index.js +2 -48
- package/dist/components/ComposeIcon/styles.js +1 -53
- package/dist/components/DateInput/DateInput-example.js +7 -45
- package/dist/components/DateInput/components/ModalWrapper/index.js +1 -35
- package/dist/components/DateInput/components/ModalWrapper/styles.js +1 -21
- package/dist/components/DateInput/dateInput.test.js +2 -43
- package/dist/components/DateInput/index.js +2 -104
- package/dist/components/DateInput/styles.js +1 -18
- package/dist/components/DatePicker/components/DatePickerContent.js +2 -222
- package/dist/components/DatePicker/components/DateYearPicker.js +1 -102
- package/dist/components/DatePicker/datepicker.test.js +1 -120
- package/dist/components/DatePicker/index.js +1 -236
- package/dist/components/DatePicker/styles.js +1 -88
- package/dist/components/DatePicker/utils/getMonthName.js +1 -11
- package/dist/components/Dialog/dialog-example.js +1 -46
- package/dist/components/Dialog/dialog.test.js +1 -68
- package/dist/components/Dialog/index.js +2 -100
- package/dist/components/Dialog/styles.js +1 -31
- package/dist/components/Dropzone/dropzone.test.js +1 -69
- package/dist/components/Dropzone/index.js +1 -289
- package/dist/components/Dropzone/styles.js +1 -75
- package/dist/components/Dropzone/utils/accepts.js +2 -27
- package/dist/components/EmojiPicker/Emote/index.js +2 -24
- package/dist/components/EmojiPicker/Emote/styles.js +1 -27
- package/dist/components/EmojiPicker/EmotePickerData/constants.js +1 -51
- package/dist/components/EmojiPicker/EmotePickerData/index.js +2 -159
- package/dist/components/EmojiPicker/EmotePickerData/styles.js +1 -57
- package/dist/components/EmojiPicker/EmotePickerData/utils.js +1 -41
- package/dist/components/EmojiPicker/Example/EmotePickerExample.js +1 -43
- package/dist/components/EmojiPicker/animation.js +1 -43
- package/dist/components/EmojiPicker/index.js +1 -169
- package/dist/components/EmojiPicker/styles.js +1 -21
- package/dist/components/Flex/flex.test.js +1 -336
- package/dist/components/Flex/index.js +1 -49
- package/dist/components/Flex/styles.js +1 -25
- package/dist/components/Grid/grid.test.js +1 -134
- package/dist/components/Grid/index.js +1 -51
- package/dist/components/Grid/styles.js +1 -48
- package/dist/components/Icon/data/beauty.js +2 -206
- package/dist/components/Icon/data/dash.js +2 -2
- package/dist/components/Icon/data/ecommerce.js +2 -94
- package/dist/components/Icon/data/form.js +2 -248
- package/dist/components/Icon/data/health.js +2 -255
- package/dist/components/Icon/data/illustrations.js +2 -318
- package/dist/components/Icon/data/men.js +2 -52
- package/dist/components/Icon/data/payment.js +2 -94
- package/dist/components/Icon/data/pedidoPago.js +2 -45
- package/dist/components/Icon/data/physicalPerfomance.js +2 -283
- package/dist/components/Icon/data/social.js +2 -24
- package/dist/components/Icon/data/status.js +2 -115
- package/dist/components/Icon/data/summer.js +2 -52
- package/dist/components/Icon/data/woman.js +2 -80
- package/dist/components/Icon/icon.test.js +1 -57
- package/dist/components/Icon/index.js +1 -53
- package/dist/components/Icon/scripts/build.js +9 -104
- package/dist/components/Icon/scripts/extractor.js +2 -33
- package/dist/components/Icon/scripts/run-build.js +2 -7
- package/dist/components/Icon/scripts/writers.js +3 -34
- package/dist/components/Icon/styles.js +1 -22
- package/dist/components/Icon/utils/allIcons.js +1 -28
- package/dist/components/Icon/utils/iconExists.js +1 -13
- package/dist/components/IconItem/IconItem.test.js +1 -58
- package/dist/components/IconItem/index.js +1 -52
- package/dist/components/IconItem/styles.js +1 -43
- package/dist/components/Illustration/illustration.test.js +4 -50
- package/dist/components/Illustration/index.js +2 -65
- package/dist/components/Illustration/styles.js +1 -65
- package/dist/components/ImageItem/imageFake.js +1 -25
- package/dist/components/ImageItem/index.js +2 -66
- package/dist/components/ImageItem/input.test.js +1 -85
- package/dist/components/ImageItem/styles.js +1 -61
- package/dist/components/Input/index.js +1 -163
- package/dist/components/Input/input.test.js +1 -120
- package/dist/components/Input/styles.js +1 -177
- package/dist/components/Label/index.js +1 -45
- package/dist/components/Label/label.test.js +1 -83
- package/dist/components/Label/styles.js +1 -21
- package/dist/components/List/index.js +1 -39
- package/dist/components/List/list.test.js +1 -64
- package/dist/components/List/styles.js +1 -23
- package/dist/components/Modal/ModalExample.js +1 -70
- package/dist/components/Modal/index.js +1 -145
- package/dist/components/Modal/modal.test.js +1 -179
- package/dist/components/Modal/styles.js +1 -33
- package/dist/components/MultipleSelect/MultipleSelect.test.js +1 -334
- package/dist/components/MultipleSelect/animations.js +1 -25
- package/dist/components/MultipleSelect/components/InputWrapper/index.js +1 -26
- package/dist/components/MultipleSelect/components/OptionsArea/index.js +1 -244
- package/dist/components/MultipleSelect/components/OptionsArea/styles.js +1 -68
- package/dist/components/MultipleSelect/components/SelectArea/ButtonsArea.js +1 -27
- package/dist/components/MultipleSelect/components/SelectArea/SelectAreaWrapper.js +1 -37
- package/dist/components/MultipleSelect/components/SelectArea/SelectedOptionsArea.js +1 -49
- package/dist/components/MultipleSelect/components/SelectArea/index.js +1 -100
- package/dist/components/MultipleSelect/components/SelectArea/styles.js +1 -36
- package/dist/components/MultipleSelect/components/index.js +1 -38
- package/dist/components/MultipleSelect/index.js +1 -209
- package/dist/components/NewSelect/Examples/constants.js +1 -56
- package/dist/components/NewSelect/Examples/index.js +1 -161
- package/dist/components/NewSelect/components/Chip/index.js +1 -36
- package/dist/components/NewSelect/components/Chip/styles.js +1 -24
- package/dist/components/NewSelect/components/OptionsSelect/styles.js +1 -21
- package/dist/components/NewSelect/components/SelectInputSearch/index.js +1 -24
- package/dist/components/NewSelect/components/SelectItem/index.js +1 -22
- package/dist/components/NewSelect/components/SelectItem/styles.js +1 -24
- package/dist/components/NewSelect/index.js +1 -18
- package/dist/components/NewSelect/multiple/index.js +1 -246
- package/dist/components/NewSelect/newSelect.test.js +1 -108
- package/dist/components/NewSelect/single/index.js +1 -183
- package/dist/components/NewSelect/styles.js +1 -44
- package/dist/components/Observer/index.js +1 -59
- package/dist/components/Observer/observer.test.js +2 -43
- package/dist/components/Pagination/hooks/usePagination.js +1 -57
- package/dist/components/Pagination/index.js +1 -174
- package/dist/components/Pagination/pagination.test.js +1 -118
- package/dist/components/Pagination/styles.js +1 -78
- package/dist/components/Progress/Circle/index.js +1 -102
- package/dist/components/Progress/Circle/styles.js +1 -69
- package/dist/components/Progress/Linear/index.js +1 -62
- package/dist/components/Progress/Linear/styles.js +1 -66
- package/dist/components/Progress/getSteps.js +1 -17
- package/dist/components/Progress/index.js +1 -39
- package/dist/components/Progress/progress.test.js +1 -109
- package/dist/components/Radio/components/RadioGroup/index.d.ts +5 -0
- package/dist/components/Radio/components/RadioGroup/index.d.ts.map +1 -0
- package/dist/components/Radio/components/RadioGroup/index.js +1 -0
- package/dist/components/Radio/components/RadioGroup/styles.d.ts +19 -0
- package/dist/components/Radio/components/RadioGroup/styles.d.ts.map +1 -0
- package/dist/components/Radio/components/RadioGroup/styles.js +1 -0
- package/dist/components/Radio/components/RadioGroup/types.d.ts +17 -0
- package/dist/components/Radio/components/RadioGroup/types.d.ts.map +1 -0
- package/dist/components/Radio/components/RadioGroup/types.js +1 -0
- package/dist/components/Radio/index.d.ts +5 -0
- package/dist/components/Radio/index.d.ts.map +1 -0
- package/dist/components/Radio/index.js +1 -0
- package/dist/components/Radio/styles.d.ts +10 -0
- package/dist/components/Radio/styles.d.ts.map +1 -0
- package/dist/components/Radio/styles.js +1 -0
- package/dist/components/Radio/types.d.ts +6 -0
- package/dist/components/Radio/types.d.ts.map +1 -0
- package/dist/components/Radio/types.js +1 -0
- package/dist/components/Rating/index.js +1 -133
- package/dist/components/Rating/rating.test.js +1 -63
- package/dist/components/Rating/styles.js +1 -27
- package/dist/components/ReactPortal/index.js +1 -43
- package/dist/components/ReactPortal/reactPortal.test.js +1 -21
- package/dist/components/ReactPortal/utils/createWrapperAndApprendToBody.js +1 -12
- package/dist/components/Select/components/OptionsSelect/index.js +1 -73
- package/dist/components/Select/components/OptionsSelect/styles.js +1 -21
- package/dist/components/Select/index.js +4 -247
- package/dist/components/Select/select.test.js +1 -58
- package/dist/components/Select/styles.js +1 -46
- package/dist/components/Skeleton/index.js +1 -28
- package/dist/components/Skeleton/skeleton.test.js +1 -90
- package/dist/components/Skeleton/styles.js +1 -27
- package/dist/components/Slider/SliderExample.js +1 -52
- package/dist/components/Slider/components/SliderPointer.js +1 -39
- package/dist/components/Slider/components/SliderRail.js +1 -116
- package/dist/components/Slider/components/SliderSelector.js +1 -173
- package/dist/components/Slider/hooks/useEventCallback.js +1 -16
- package/dist/components/Slider/index.js +1 -137
- package/dist/components/Slider/slider.test.js +1 -121
- package/dist/components/Slider/styles.js +1 -69
- package/dist/components/Spinner/index.js +1 -26
- package/dist/components/Spinner/spinner.test.js +1 -45
- package/dist/components/Spinner/styles.js +1 -23
- package/dist/components/Steps/components/StepIcon/index.js +1 -50
- package/dist/components/Steps/components/StepIcon/styles.js +1 -42
- package/dist/components/Steps/components/StepIcon/utils.js +1 -22
- package/dist/components/Steps/index.js +1 -116
- package/dist/components/Steps/steps.test.js +1 -53
- package/dist/components/Steps/styles.js +1 -96
- package/dist/components/Steps/utils.js +1 -15
- package/dist/components/Switch/index.js +1 -73
- package/dist/components/Switch/styles.js +1 -58
- package/dist/components/Switch/switch.test.js +2 -115
- package/dist/components/Table/components/MenuItem.js +1 -59
- package/dist/components/Table/components/TableSkeleton.js +1 -39
- package/dist/components/Table/components/animations.js +1 -24
- package/dist/components/Table/index.js +2 -253
- package/dist/components/Table/styles.js +1 -49
- package/dist/components/Table/table.test.js +1 -114
- package/dist/components/Tabs/TabsExample.js +1 -64
- package/dist/components/Tabs/components/Tab.js +1 -49
- package/dist/components/Tabs/components/TabPanel.js +1 -25
- package/dist/components/Tabs/components/Tabs.js +1 -107
- package/dist/components/Tabs/index.js +1 -26
- package/dist/components/Tabs/styles.js +1 -61
- package/dist/components/Tabs/tabs.test.js +1 -146
- package/dist/components/Tag/index.js +1 -53
- package/dist/components/Tag/styles.js +1 -34
- package/dist/components/Tag/tag.test.js +1 -64
- package/dist/components/TextAreaInput/index.js +1 -74
- package/dist/components/TextAreaInput/styles.js +1 -53
- package/dist/components/TextAreaInput/text-area-input.test.js +1 -81
- package/dist/components/Thumbnail/index.js +1 -125
- package/dist/components/Thumbnail/styles.js +1 -47
- package/dist/components/Thumbnail/thumbnail.test.js +1 -66
- package/dist/components/Thumbnail/utils/index.js +1 -27
- package/dist/components/Thumbnail/utils/validate-file-size.js +1 -10
- package/dist/components/Thumbnail/utils/validate-file-type.js +1 -9
- package/dist/components/TimeInput/constants.js +1 -29
- package/dist/components/TimeInput/index.js +1 -288
- package/dist/components/TimeInput/styles.js +1 -34
- package/dist/components/TimeInput/utils.js +1 -94
- package/dist/components/Timeline/components/Timeline.js +1 -17
- package/dist/components/Timeline/components/TimelineContent.js +1 -61
- package/dist/components/Timeline/components/TimelineItem.js +1 -25
- package/dist/components/Timeline/components/TimelineSeparator.js +1 -20
- package/dist/components/Timeline/index.js +1 -33
- package/dist/components/Timeline/styles.js +1 -37
- package/dist/components/Timeline/timeline.test.js +1 -138
- package/dist/components/Toast/button-example.js +1 -31
- package/dist/components/Toast/components/Toast.js +1 -79
- package/dist/components/Toast/contexts/ToastProvider.js +1 -72
- package/dist/components/Toast/hooks/useToast.js +1 -18
- package/dist/components/Toast/index.js +1 -111
- package/dist/components/Toast/styles.js +1 -36
- package/dist/components/Toast/toast.test.js +1 -129
- package/dist/components/Tooltip/components/TooltipLabel.js +1 -71
- package/dist/components/Tooltip/example.js +1 -27
- package/dist/components/Tooltip/index.js +1 -187
- package/dist/components/Tooltip/styles.js +1 -20
- package/dist/components/Typography/index.js +1 -37
- package/dist/components/Typography/styles.js +1 -15
- package/dist/components/Typography/typography.test.js +1 -288
- package/dist/index.d.ts +5 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -548
- package/dist/shared/animations/opacityAnimation.js +1 -21
- package/dist/shared/assets/emotes.js +1 -1
- package/dist/shared/components/FocusLock/index.js +5 -86
- package/dist/shared/formatters/format-number.js +5 -41
- package/dist/shared/global.js +1 -8
- package/dist/shared/hooks/devices.js +1 -14
- package/dist/shared/hooks/useBreakpoints.js +2 -95
- package/dist/shared/hooks/useDebounce.js +1 -35
- package/dist/shared/hooks/useDevices.js +2 -42
- package/dist/shared/hooks/useDisableBodyScroll.js +5 -52
- package/dist/shared/hooks/useDraggableScroll/index.js +5 -65
- package/dist/shared/hooks/useKeyPress.js +1 -18
- package/dist/shared/hooks/useObserver.js +2 -29
- package/dist/shared/hooks/useOnClickOutside.js +1 -30
- package/dist/shared/hooks/useReposition/index.js +2 -53
- package/dist/shared/hooks/useSystemTheme.js +1 -38
- package/dist/shared/hooks/useWindowSize.js +1 -36
- package/dist/shared/tests/test-utils.js +1 -31
- package/dist/shared/theme/button-example.js +1 -31
- package/dist/shared/theme/contexts/ThemeContext.js +1 -90
- package/dist/shared/theme/hooks/useColorMode.js +1 -18
- package/dist/shared/theme/hooks/useColorModeValue.js +1 -13
- package/dist/shared/theme/hooks/useTheme.js +1 -17
- package/dist/shared/theme/index.js +1 -67
- package/dist/shared/theme/objects/breakpoints.js +1 -15
- package/dist/shared/theme/objects/colors.js +1 -177
- package/dist/shared/theme/objects/shadows.js +1 -19
- package/dist/shared/theme/objects/sizes.js +6 -33
- package/dist/shared/theme/objects/spaces.js +1 -75
- package/dist/shared/theme/objects/transitions.js +1 -10
- package/dist/shared/theme/objects/typography.js +1 -20
- package/dist/shared/theme/objects/z-indexes.js +1 -20
- package/dist/shared/theme/theme.js +1 -36
- package/dist/shared/theme/theme.test.js +1 -94
- package/dist/shared/theme/utils/extendTheme.js +1 -25
- package/dist/shared/theme/utils/localStorageController.js +1 -21
- package/dist/styled.d.js +1 -3
- package/dist/utils/GenerateKey.js +3 -18
- package/dist/utils/brightnessColorChange.js +2 -17
- package/dist/utils/colorCheck.js +6 -64
- package/dist/utils/colorFunctions.js +1 -39
- package/dist/utils/colorToGray.js +2 -64
- package/dist/utils/customColorMode.js +1 -11
- package/dist/utils/file.js +5 -124
- package/dist/utils/formatters/bytes.js +2 -17
- package/dist/utils/formatters/capitalize.js +2 -11
- package/dist/utils/formatters/cep.js +3 -18
- package/dist/utils/formatters/cnpj.js +4 -38
- package/dist/utils/formatters/color.js +12 -101
- package/dist/utils/formatters/cpf.js +16 -85
- package/dist/utils/formatters/credit-card.js +5 -54
- package/dist/utils/formatters/email.js +1 -8
- package/dist/utils/formatters/index.js +1 -170
- package/dist/utils/formatters/name.js +4 -31
- package/dist/utils/formatters/number.js +5 -14
- package/dist/utils/formatters/passport.js +5 -33
- package/dist/utils/formatters/phone.js +17 -214
- package/dist/utils/formatters/price.js +3 -21
- package/dist/utils/formatters/rg.js +3 -18
- package/dist/utils/formatters/strings.js +4 -27
- package/dist/utils/fuctionsColors.js +1 -39
- package/dist/utils/generateUUID.js +1 -13
- package/dist/utils/getColorValue.js +2 -23
- package/dist/utils/getSvg.js +1 -17
- package/dist/utils/getValuesBySize.js +1 -9
- package/dist/utils/invertColor.js +4 -40
- package/package.json +2 -1
|
@@ -1,68 +1 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _testUtils = require("../../shared/tests/test-utils");
|
|
4
|
-
var _react = require("@testing-library/react");
|
|
5
|
-
require("@testing-library/jest-dom");
|
|
6
|
-
var _ThemeContext = require("../../shared/theme/contexts/ThemeContext");
|
|
7
|
-
var _ = require(".");
|
|
8
|
-
var _jsxRuntime = require("react/jsx-runtime");
|
|
9
|
-
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
10
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
11
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
12
|
-
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
13
|
-
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
14
|
-
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
15
|
-
var setup = function setup(props) {
|
|
16
|
-
var utils = (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_ThemeContext.PPUIThemeProvider, {
|
|
17
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Dialog, _objectSpread({}, props))
|
|
18
|
-
}));
|
|
19
|
-
return _objectSpread({}, utils);
|
|
20
|
-
};
|
|
21
|
-
describe('Dialog', function () {
|
|
22
|
-
it('should render the dialog component', function () {
|
|
23
|
-
var _setup = setup({
|
|
24
|
-
open: true,
|
|
25
|
-
title: 'Title',
|
|
26
|
-
message: 'test',
|
|
27
|
-
onClose: function onClose() {}
|
|
28
|
-
}),
|
|
29
|
-
container = _setup.container;
|
|
30
|
-
expect(container).toBeInTheDocument();
|
|
31
|
-
});
|
|
32
|
-
it('should call the close callback in the dialog component', function () {
|
|
33
|
-
var onClose = jest.fn();
|
|
34
|
-
var _setup2 = setup({
|
|
35
|
-
open: true,
|
|
36
|
-
title: 'Title',
|
|
37
|
-
message: 'test',
|
|
38
|
-
onClose: onClose,
|
|
39
|
-
closeButton: true
|
|
40
|
-
}),
|
|
41
|
-
baseElement = _setup2.baseElement;
|
|
42
|
-
var closeButton = baseElement.querySelector('.ppui-dialog__close-button');
|
|
43
|
-
expect(closeButton).toBeInTheDocument();
|
|
44
|
-
_react.fireEvent.click(closeButton);
|
|
45
|
-
});
|
|
46
|
-
it('should render the dialog component with the correct title', function () {
|
|
47
|
-
var _setup3 = setup({
|
|
48
|
-
open: true,
|
|
49
|
-
title: 'Title',
|
|
50
|
-
message: 'test',
|
|
51
|
-
onClose: function onClose() {}
|
|
52
|
-
}),
|
|
53
|
-
getByText = _setup3.getByText;
|
|
54
|
-
expect(getByText('Title')).toBeInTheDocument();
|
|
55
|
-
});
|
|
56
|
-
it('should render the dialog component with different icon', function () {
|
|
57
|
-
var _setup4 = setup({
|
|
58
|
-
open: true,
|
|
59
|
-
title: 'Title',
|
|
60
|
-
message: 'test',
|
|
61
|
-
onClose: function onClose() {},
|
|
62
|
-
illustration: 'illust-banking-billet'
|
|
63
|
-
}),
|
|
64
|
-
baseElement = _setup4.baseElement;
|
|
65
|
-
var main = baseElement.querySelector('[name="illust-banking-billet"]');
|
|
66
|
-
expect(main).toBeInTheDocument();
|
|
67
|
-
});
|
|
68
|
-
});
|
|
1
|
+
"use strict";var _testUtils=require("../../shared/tests/test-utils"),_react=require("@testing-library/react");require("@testing-library/jest-dom");var _ThemeContext=require("../../shared/theme/contexts/ThemeContext"),_=require("."),_jsxRuntime=require("react/jsx-runtime");function _typeof(obj){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(obj){return typeof obj}:function(obj){return obj&&"function"==typeof Symbol&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj},_typeof(obj)}function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable})),keys.push.apply(keys,symbols)}return keys}function _objectSpread(target){for(var source,i=1;i<arguments.length;i++)source=null==arguments[i]?{}:arguments[i],i%2?ownKeys(Object(source),!0).forEach(function(key){_defineProperty(target,key,source[key])}):Object.getOwnPropertyDescriptors?Object.defineProperties(target,Object.getOwnPropertyDescriptors(source)):ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key))});return target}function _defineProperty(obj,key,value){return key=_toPropertyKey(key),key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}function _toPropertyKey(arg){var key=_toPrimitive(arg,"string");return"symbol"===_typeof(key)?key:key+""}function _toPrimitive(input,hint){if("object"!==_typeof(input)||null===input)return input;var prim=input[Symbol.toPrimitive];if(prim!==void 0){var res=prim.call(input,hint||"default");if("object"!==_typeof(res))return res;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===hint?String:Number)(input)}var setup=function(props){var utils=(0,_testUtils.render)(/*#__PURE__*/(0,_jsxRuntime.jsx)(_ThemeContext.PPUIThemeProvider,{children:/*#__PURE__*/(0,_jsxRuntime.jsx)(_.Dialog,_objectSpread({},props))}));return _objectSpread({},utils)};describe("Dialog",function(){it("should render the dialog component",function(){var _setup=setup({open:!0,title:"Title",message:"test",onClose:function onClose(){}}),container=_setup.container;expect(container).toBeInTheDocument()}),it("should call the close callback in the dialog component",function(){var onClose=jest.fn(),_setup2=setup({open:!0,title:"Title",message:"test",onClose:onClose,closeButton:!0}),baseElement=_setup2.baseElement,closeButton=baseElement.querySelector(".ppui-dialog__close-button");expect(closeButton).toBeInTheDocument(),_react.fireEvent.click(closeButton)}),it("should render the dialog component with the correct title",function(){var _setup3=setup({open:!0,title:"Title",message:"test",onClose:function onClose(){}}),getByText=_setup3.getByText;expect(getByText("Title")).toBeInTheDocument()}),it("should render the dialog component with different icon",function(){var _setup4=setup({open:!0,title:"Title",message:"test",onClose:function onClose(){},illustration:"illust-banking-billet"}),baseElement=_setup4.baseElement,main=baseElement.querySelector("[name=\"illust-banking-billet\"]");expect(main).toBeInTheDocument()})});
|
|
@@ -1,103 +1,5 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.Dialog = Dialog;
|
|
7
|
-
var _Modal = require("../Modal");
|
|
8
|
-
var _Flex = _interopRequireDefault(require("../Flex"));
|
|
9
|
-
var _Icon = _interopRequireDefault(require("../Icon"));
|
|
10
|
-
var _Typography = _interopRequireDefault(require("../Typography"));
|
|
11
|
-
var _styles = require("./styles");
|
|
12
|
-
var _useDevices = require("../../shared/hooks/useDevices");
|
|
13
|
-
var _colorCheck = require("../../utils/colorCheck");
|
|
14
|
-
var _theme = require("../../shared/theme");
|
|
15
|
-
var _jsxRuntime = require("react/jsx-runtime");
|
|
16
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
|
-
/* eslint-disable no-console */
|
|
18
|
-
// Components
|
|
19
|
-
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.Dialog=Dialog;var _Modal=require("../Modal"),_Flex=_interopRequireDefault(require("../Flex")),_Icon=_interopRequireDefault(require("../Icon")),_Typography=_interopRequireDefault(require("../Typography")),_styles=require("./styles"),_useDevices=require("../../shared/hooks/useDevices"),_colorCheck=require("../../utils/colorCheck"),_theme=require("../../shared/theme"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}/* eslint-disable no-console */ // Components
|
|
20
2
|
// Styles
|
|
21
|
-
|
|
22
3
|
// Types
|
|
23
|
-
|
|
24
4
|
// Hooks
|
|
25
|
-
|
|
26
|
-
function Dialog(_ref) {
|
|
27
|
-
var open = _ref.open,
|
|
28
|
-
illustration = _ref.illustration,
|
|
29
|
-
title = _ref.title,
|
|
30
|
-
message = _ref.message,
|
|
31
|
-
closeButton = _ref.closeButton,
|
|
32
|
-
confirmationButton = _ref.confirmationButton,
|
|
33
|
-
cancelButton = _ref.cancelButton,
|
|
34
|
-
backgroundColor = _ref.backgroundColor,
|
|
35
|
-
contentColor = _ref.contentColor,
|
|
36
|
-
onClose = _ref.onClose;
|
|
37
|
-
var _useTheme = (0, _theme.useTheme)(),
|
|
38
|
-
theme = _useTheme.theme;
|
|
39
|
-
var isMobile = (0, _useDevices.useDevices)('mobile');
|
|
40
|
-
var backgroundColorValue = backgroundColor ? (0, _colorCheck.stripThemeColors)(backgroundColor, theme.colors) || backgroundColor : theme.colors.neutral.white;
|
|
41
|
-
var contentColorValue = contentColor ? (0, _colorCheck.stripThemeColors)(contentColor, theme.colors) || contentColor : theme.colors.neutral.black;
|
|
42
|
-
var isHidden = !open;
|
|
43
|
-
var tabIndex = isHidden ? -1 : 0;
|
|
44
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.Modal, {
|
|
45
|
-
open: open,
|
|
46
|
-
"aria-hidden": isHidden,
|
|
47
|
-
maxWidth: "640px",
|
|
48
|
-
onClose: onClose,
|
|
49
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
|
|
50
|
-
className: "ppui-dialog__container",
|
|
51
|
-
isMobile: isMobile,
|
|
52
|
-
role: "dialog",
|
|
53
|
-
illustration: !!illustration,
|
|
54
|
-
backgroundColor: backgroundColorValue,
|
|
55
|
-
contentColor: contentColorValue,
|
|
56
|
-
children: [closeButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.CloseButton, {
|
|
57
|
-
className: "ppui-dialog__close-button",
|
|
58
|
-
tabIndex: tabIndex,
|
|
59
|
-
"aria-hidden": isHidden,
|
|
60
|
-
onClick: onClose,
|
|
61
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
|
|
62
|
-
name: "x",
|
|
63
|
-
size: 24,
|
|
64
|
-
color: theme.colors.neutral.neutral4
|
|
65
|
-
})
|
|
66
|
-
}), !!illustration && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
|
|
67
|
-
name: illustration,
|
|
68
|
-
size: "124px"
|
|
69
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Flex.default, {
|
|
70
|
-
direction: "column",
|
|
71
|
-
spacing: "40px",
|
|
72
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
73
|
-
style: {
|
|
74
|
-
paddingRight: closeButton ? 40 : 0
|
|
75
|
-
},
|
|
76
|
-
children: [!!title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
|
|
77
|
-
fontSize: "lg",
|
|
78
|
-
fontWeight: "600",
|
|
79
|
-
children: title
|
|
80
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
|
|
81
|
-
fontSize: "md",
|
|
82
|
-
fontWeight: "400",
|
|
83
|
-
children: message
|
|
84
|
-
})]
|
|
85
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("footer", {
|
|
86
|
-
children: [!!confirmationButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.PrimaryButton, {
|
|
87
|
-
className: "ppui-dialog__confirm-button",
|
|
88
|
-
tabIndex: tabIndex,
|
|
89
|
-
"aria-hidden": isHidden,
|
|
90
|
-
onClick: confirmationButton.handler,
|
|
91
|
-
children: confirmationButton.label
|
|
92
|
-
}), !!cancelButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.SecondaryButton, {
|
|
93
|
-
className: "ppui-dialog__cancel-button",
|
|
94
|
-
tabIndex: tabIndex,
|
|
95
|
-
"aria-hidden": isHidden,
|
|
96
|
-
onClick: cancelButton.handler,
|
|
97
|
-
children: cancelButton.label
|
|
98
|
-
})]
|
|
99
|
-
})]
|
|
100
|
-
})]
|
|
101
|
-
})
|
|
102
|
-
});
|
|
103
|
-
}
|
|
5
|
+
function Dialog(_ref){var open=_ref.open,illustration=_ref.illustration,title=_ref.title,message=_ref.message,closeButton=_ref.closeButton,confirmationButton=_ref.confirmationButton,cancelButton=_ref.cancelButton,backgroundColor=_ref.backgroundColor,contentColor=_ref.contentColor,onClose=_ref.onClose,_useTheme=(0,_theme.useTheme)(),theme=_useTheme.theme,isMobile=(0,_useDevices.useDevices)("mobile"),backgroundColorValue=backgroundColor?(0,_colorCheck.stripThemeColors)(backgroundColor,theme.colors)||backgroundColor:theme.colors.neutral.white,contentColorValue=contentColor?(0,_colorCheck.stripThemeColors)(contentColor,theme.colors)||contentColor:theme.colors.neutral.black,isHidden=!open,tabIndex=isHidden?-1:0;return/*#__PURE__*/(0,_jsxRuntime.jsx)(_Modal.Modal,{open:open,"aria-hidden":isHidden,maxWidth:"640px",onClose:onClose,children:/*#__PURE__*/(0,_jsxRuntime.jsxs)(_styles.Container,{className:"ppui-dialog__container",isMobile:isMobile,role:"dialog",illustration:!!illustration,backgroundColor:backgroundColorValue,contentColor:contentColorValue,children:[closeButton&&/*#__PURE__*/(0,_jsxRuntime.jsx)(_styles.CloseButton,{className:"ppui-dialog__close-button",tabIndex:tabIndex,"aria-hidden":isHidden,onClick:onClose,children:/*#__PURE__*/(0,_jsxRuntime.jsx)(_Icon.default,{name:"x",size:24,color:theme.colors.neutral.neutral4})}),!!illustration&&/*#__PURE__*/(0,_jsxRuntime.jsx)(_Icon.default,{name:illustration,size:"124px"}),/*#__PURE__*/(0,_jsxRuntime.jsxs)(_Flex.default,{direction:"column",spacing:"40px",children:[/*#__PURE__*/(0,_jsxRuntime.jsxs)("div",{style:{paddingRight:closeButton?40:0},children:[!!title&&/*#__PURE__*/(0,_jsxRuntime.jsx)(_Typography.default,{fontSize:"lg",fontWeight:"600",children:title}),/*#__PURE__*/(0,_jsxRuntime.jsx)(_Typography.default,{fontSize:"md",fontWeight:"400",children:message})]}),/*#__PURE__*/(0,_jsxRuntime.jsxs)("footer",{children:[!!confirmationButton&&/*#__PURE__*/(0,_jsxRuntime.jsx)(_styles.PrimaryButton,{className:"ppui-dialog__confirm-button",tabIndex:tabIndex,"aria-hidden":isHidden,onClick:confirmationButton.handler,children:confirmationButton.label}),!!cancelButton&&/*#__PURE__*/(0,_jsxRuntime.jsx)(_styles.SecondaryButton,{className:"ppui-dialog__cancel-button",tabIndex:tabIndex,"aria-hidden":isHidden,onClick:cancelButton.handler,children:cancelButton.label})]})]})]})})}
|
|
@@ -1,31 +1 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.SecondaryButton = exports.PrimaryButton = exports.Container = exports.CloseButton = void 0;
|
|
7
|
-
var _react = require("@emotion/react");
|
|
8
|
-
var _styled = _interopRequireDefault(require("@emotion/styled"));
|
|
9
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
|
|
10
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
|
-
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
12
|
-
var Container = _styled.default.div(function (props) {
|
|
13
|
-
return (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: ", ";\n ", "\n justify-content: space-between;\n gap: 16px;\n border-radius: inherit;\n padding: 32px;\n min-height: 120px;\n position: relative;\n\n background-color: ", ";\n\n & p {\n color: ", ";\n }\n\n & > button:first-of-type {\n position: absolute;\n top: 32px;\n right: 32px;\n }\n\n & > svg {\n flex-shrink: 0;\n }\n\n & > div {\n width: 100%;\n\n & > div {\n display: flex;\n flex-direction: column;\n gap: 32px;\n\n margin-right: auto;\n ", "\n }\n\n & > footer {\n display: flex;\n flex-direction: ", ";\n gap: 16px;\n }\n }\n\n ", "\n "])), props.isMobile ? 'column' : 'row', props.isMobile ? (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n align-items: center;\n "]))) : '', props.backgroundColor, props.contentColor, props.isMobile ? (0, _react.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n padding: 0 !important;\n\n text-align: center;\n "]))) : '', props.isMobile ? 'column' : props.illustration ? 'row' : 'row-reverse', props.isMobile && "\n & .ppui-dialog__confirm-button,\n & .ppui-dialog__cancel-button {\n width: 100%;\n }\n ");
|
|
14
|
-
});
|
|
15
|
-
exports.Container = Container;
|
|
16
|
-
var CloseButton = _styled.default.button(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n outline: 0;\n border: 0;\n background: transparent;\n cursor: pointer;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n &:focus-visible {\n outline: 3px solid black;\n }\n"])));
|
|
17
|
-
exports.CloseButton = CloseButton;
|
|
18
|
-
var PrimaryButton = _styled.default.button(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n padding: 14px 24px;\n border-radius: 8px;\n background: ", ";\n color: ", ";\n font-family: inherit;\n font-weight: 600;\n font-size: 16px;\n border: 0;\n outline: 0;\n cursor: pointer;\n transition: all ease 0.2s;\n\n &:hover {\n filter: brightness(0.7);\n }\n\n &:focus {\n background-color: ", ";\n }\n\n &:focus-visible {\n outline: 3px solid black;\n }\n"])), function (props) {
|
|
19
|
-
return props.theme.colors.primary.focus;
|
|
20
|
-
}, function (props) {
|
|
21
|
-
return props.theme.lightColors.neutral.neutral1;
|
|
22
|
-
}, function (props) {
|
|
23
|
-
return props.theme.colors.primary.focus;
|
|
24
|
-
});
|
|
25
|
-
exports.PrimaryButton = PrimaryButton;
|
|
26
|
-
var SecondaryButton = _styled.default.button(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n padding: 14px 24px;\n border-radius: 8px;\n background: transparent;\n font-family: inherit;\n font-weight: 600;\n font-size: 16px;\n border: 0;\n outline: 0;\n color: ", ";\n cursor: pointer;\n\n &:hover {\n color: ", ";\n }\n\n &:focus-visible {\n outline: 3px solid black;\n }\n"])), function (props) {
|
|
27
|
-
return props.theme.colors.neutral.neutral3;
|
|
28
|
-
}, function (props) {
|
|
29
|
-
return props.theme.colors.neutral.neutral5;
|
|
30
|
-
});
|
|
31
|
-
exports.SecondaryButton = SecondaryButton;
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.SecondaryButton=exports.PrimaryButton=exports.Container=exports.CloseButton=void 0;var _templateObject,_templateObject2,_templateObject3,_templateObject4,_templateObject5,_templateObject6,_react=require("@emotion/react"),_styled=_interopRequireDefault(require("@emotion/styled"));function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}function _taggedTemplateLiteral(strings,raw){return raw||(raw=strings.slice(0)),Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}))}var Container=_styled.default.div(function(props){return(0,_react.css)(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n display: flex;\n flex-direction: ",";\n ","\n justify-content: space-between;\n gap: 16px;\n border-radius: inherit;\n padding: 32px;\n min-height: 120px;\n position: relative;\n\n background-color: ",";\n\n & p {\n color: ",";\n }\n\n & > button:first-of-type {\n position: absolute;\n top: 32px;\n right: 32px;\n }\n\n & > svg {\n flex-shrink: 0;\n }\n\n & > div {\n width: 100%;\n\n & > div {\n display: flex;\n flex-direction: column;\n gap: 32px;\n\n margin-right: auto;\n ","\n }\n\n & > footer {\n display: flex;\n flex-direction: ",";\n gap: 16px;\n }\n }\n\n ","\n "])),props.isMobile?"column":"row",props.isMobile?(0,_react.css)(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["\n align-items: center;\n "]))):"",props.backgroundColor,props.contentColor,props.isMobile?(0,_react.css)(_templateObject3||(_templateObject3=_taggedTemplateLiteral(["\n padding: 0 !important;\n\n text-align: center;\n "]))):"",props.isMobile?"column":props.illustration?"row":"row-reverse",props.isMobile&&"\n & .ppui-dialog__confirm-button,\n & .ppui-dialog__cancel-button {\n width: 100%;\n }\n ")});exports.Container=Container;var CloseButton=_styled.default.button(_templateObject4||(_templateObject4=_taggedTemplateLiteral(["\n outline: 0;\n border: 0;\n background: transparent;\n cursor: pointer;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n &:focus-visible {\n outline: 3px solid black;\n }\n"])));exports.CloseButton=CloseButton;var PrimaryButton=_styled.default.button(_templateObject5||(_templateObject5=_taggedTemplateLiteral(["\n padding: 14px 24px;\n border-radius: 8px;\n background: ",";\n color: ",";\n font-family: inherit;\n font-weight: 600;\n font-size: 16px;\n border: 0;\n outline: 0;\n cursor: pointer;\n transition: all ease 0.2s;\n\n &:hover {\n filter: brightness(0.7);\n }\n\n &:focus {\n background-color: ",";\n }\n\n &:focus-visible {\n outline: 3px solid black;\n }\n"])),function(props){return props.theme.colors.primary.focus},function(props){return props.theme.lightColors.neutral.neutral1},function(props){return props.theme.colors.primary.focus});exports.PrimaryButton=PrimaryButton;var SecondaryButton=_styled.default.button(_templateObject6||(_templateObject6=_taggedTemplateLiteral(["\n padding: 14px 24px;\n border-radius: 8px;\n background: transparent;\n font-family: inherit;\n font-weight: 600;\n font-size: 16px;\n border: 0;\n outline: 0;\n color: ",";\n cursor: pointer;\n\n &:hover {\n color: ",";\n }\n\n &:focus-visible {\n outline: 3px solid black;\n }\n"])),function(props){return props.theme.colors.neutral.neutral3},function(props){return props.theme.colors.neutral.neutral5});exports.SecondaryButton=SecondaryButton;
|
|
@@ -1,69 +1 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _testUtils = require("../../shared/tests/test-utils");
|
|
4
|
-
require("@testing-library/jest-dom");
|
|
5
|
-
var _ = _interopRequireDefault(require("."));
|
|
6
|
-
var _jsxRuntime = require("react/jsx-runtime");
|
|
7
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
8
|
-
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
9
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
10
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
11
|
-
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
12
|
-
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
13
|
-
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
14
|
-
var setup = function setup(props) {
|
|
15
|
-
var utils = (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, _objectSpread({}, props)));
|
|
16
|
-
return utils;
|
|
17
|
-
};
|
|
18
|
-
describe('Dropzone', function () {
|
|
19
|
-
beforeAll(function () {
|
|
20
|
-
window.URL.createObjectURL = jest.fn();
|
|
21
|
-
});
|
|
22
|
-
it('should it render the dropzone correctly', function () {
|
|
23
|
-
var _setup = setup({
|
|
24
|
-
onChange: jest.fn(),
|
|
25
|
-
onDropAccepted: jest.fn(),
|
|
26
|
-
onDropRejected: jest.fn(),
|
|
27
|
-
onDragEnter: jest.fn(),
|
|
28
|
-
onDragLeave: jest.fn()
|
|
29
|
-
}),
|
|
30
|
-
container = _setup.container;
|
|
31
|
-
expect(container).toBeInTheDocument();
|
|
32
|
-
});
|
|
33
|
-
it('shoud it render the dropzone with multiple prop', function () {
|
|
34
|
-
var _setup2 = setup({
|
|
35
|
-
onChange: jest.fn(),
|
|
36
|
-
onDropAccepted: jest.fn(),
|
|
37
|
-
onDropRejected: jest.fn(),
|
|
38
|
-
onDragEnter: jest.fn(),
|
|
39
|
-
onDragLeave: jest.fn(),
|
|
40
|
-
multiple: true
|
|
41
|
-
}),
|
|
42
|
-
container = _setup2.container;
|
|
43
|
-
expect(container).toBeInTheDocument();
|
|
44
|
-
});
|
|
45
|
-
it('should it render the dropzone with accept prop', function () {
|
|
46
|
-
var _setup3 = setup({
|
|
47
|
-
onChange: jest.fn(),
|
|
48
|
-
onDropAccepted: jest.fn(),
|
|
49
|
-
onDropRejected: jest.fn(),
|
|
50
|
-
onDragEnter: jest.fn(),
|
|
51
|
-
onDragLeave: jest.fn(),
|
|
52
|
-
accept: 'image/*'
|
|
53
|
-
}),
|
|
54
|
-
container = _setup3.container;
|
|
55
|
-
expect(container).toBeInTheDocument();
|
|
56
|
-
});
|
|
57
|
-
it('should it render the dropzone with disabled prop', function () {
|
|
58
|
-
var _setup4 = setup({
|
|
59
|
-
onChange: jest.fn(),
|
|
60
|
-
onDropAccepted: jest.fn(),
|
|
61
|
-
onDropRejected: jest.fn(),
|
|
62
|
-
onDragEnter: jest.fn(),
|
|
63
|
-
onDragLeave: jest.fn(),
|
|
64
|
-
disabled: true
|
|
65
|
-
}),
|
|
66
|
-
container = _setup4.container;
|
|
67
|
-
expect(container).toBeInTheDocument();
|
|
68
|
-
});
|
|
69
|
-
});
|
|
1
|
+
"use strict";var _testUtils=require("../../shared/tests/test-utils");require("@testing-library/jest-dom");var _=_interopRequireDefault(require(".")),_jsxRuntime=require("react/jsx-runtime");function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}function _typeof(obj){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(obj){return typeof obj}:function(obj){return obj&&"function"==typeof Symbol&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj},_typeof(obj)}function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable})),keys.push.apply(keys,symbols)}return keys}function _objectSpread(target){for(var source,i=1;i<arguments.length;i++)source=null==arguments[i]?{}:arguments[i],i%2?ownKeys(Object(source),!0).forEach(function(key){_defineProperty(target,key,source[key])}):Object.getOwnPropertyDescriptors?Object.defineProperties(target,Object.getOwnPropertyDescriptors(source)):ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key))});return target}function _defineProperty(obj,key,value){return key=_toPropertyKey(key),key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}function _toPropertyKey(arg){var key=_toPrimitive(arg,"string");return"symbol"===_typeof(key)?key:key+""}function _toPrimitive(input,hint){if("object"!==_typeof(input)||null===input)return input;var prim=input[Symbol.toPrimitive];if(prim!==void 0){var res=prim.call(input,hint||"default");if("object"!==_typeof(res))return res;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===hint?String:Number)(input)}var setup=function(props){var utils=(0,_testUtils.render)(/*#__PURE__*/(0,_jsxRuntime.jsx)(_.default,_objectSpread({},props)));return utils};describe("Dropzone",function(){beforeAll(function(){window.URL.createObjectURL=jest.fn()}),it("should it render the dropzone correctly",function(){var _setup=setup({onChange:jest.fn(),onDropAccepted:jest.fn(),onDropRejected:jest.fn(),onDragEnter:jest.fn(),onDragLeave:jest.fn()}),container=_setup.container;expect(container).toBeInTheDocument()}),it("shoud it render the dropzone with multiple prop",function(){var _setup2=setup({onChange:jest.fn(),onDropAccepted:jest.fn(),onDropRejected:jest.fn(),onDragEnter:jest.fn(),onDragLeave:jest.fn(),multiple:!0}),container=_setup2.container;expect(container).toBeInTheDocument()}),it("should it render the dropzone with accept prop",function(){var _setup3=setup({onChange:jest.fn(),onDropAccepted:jest.fn(),onDropRejected:jest.fn(),onDragEnter:jest.fn(),onDragLeave:jest.fn(),accept:"image/*"}),container=_setup3.container;expect(container).toBeInTheDocument()}),it("should it render the dropzone with disabled prop",function(){var _setup4=setup({onChange:jest.fn(),onDropAccepted:jest.fn(),onDropRejected:jest.fn(),onDragEnter:jest.fn(),onDragLeave:jest.fn(),disabled:!0}),container=_setup4.container;expect(container).toBeInTheDocument()})});
|
|
@@ -1,289 +1 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.default = void 0;
|
|
8
|
-
var _react = require("react");
|
|
9
|
-
var _framerMotion = require("framer-motion");
|
|
10
|
-
var _Icon = _interopRequireDefault(require("../Icon"));
|
|
11
|
-
var _Flex = _interopRequireDefault(require("../Flex"));
|
|
12
|
-
var _Button = _interopRequireDefault(require("../Button"));
|
|
13
|
-
var _styles = require("./styles");
|
|
14
|
-
var _accepts = require("./utils/accepts");
|
|
15
|
-
var _generateUUID = require("../../utils/generateUUID");
|
|
16
|
-
var _jsxRuntime = require("react/jsx-runtime");
|
|
17
|
-
var _excluded = ["icon", "title", "disabledButton", "buttonText", "alert", "helperText", "multiple", "onChange", "onDropAccepted", "onDropRejected", "accept", "onDragEnter", "onDragLeave", "disabled"];
|
|
18
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
20
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
21
|
-
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
22
|
-
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
23
|
-
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
24
|
-
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
|
25
|
-
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
26
|
-
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
|
27
|
-
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
|
28
|
-
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
29
|
-
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
30
|
-
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
31
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
32
|
-
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
|
|
33
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
34
|
-
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
35
|
-
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
36
|
-
var Dropzone = function Dropzone(_ref) {
|
|
37
|
-
var icon = _ref.icon,
|
|
38
|
-
title = _ref.title,
|
|
39
|
-
_ref$disabledButton = _ref.disabledButton,
|
|
40
|
-
disabledButton = _ref$disabledButton === void 0 ? false : _ref$disabledButton,
|
|
41
|
-
buttonText = _ref.buttonText,
|
|
42
|
-
alert = _ref.alert,
|
|
43
|
-
helperText = _ref.helperText,
|
|
44
|
-
multiple = _ref.multiple,
|
|
45
|
-
onChange = _ref.onChange,
|
|
46
|
-
onDropAccepted = _ref.onDropAccepted,
|
|
47
|
-
onDropRejected = _ref.onDropRejected,
|
|
48
|
-
_ref$accept = _ref.accept,
|
|
49
|
-
accept = _ref$accept === void 0 ? '' : _ref$accept,
|
|
50
|
-
onDragEnter = _ref.onDragEnter,
|
|
51
|
-
onDragLeave = _ref.onDragLeave,
|
|
52
|
-
disabled = _ref.disabled,
|
|
53
|
-
rest = _objectWithoutProperties(_ref, _excluded);
|
|
54
|
-
var _useState = (0, _react.useState)([]),
|
|
55
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
56
|
-
acceptedFiles = _useState2[0],
|
|
57
|
-
setAcceptedFiles = _useState2[1];
|
|
58
|
-
var _useState3 = (0, _react.useState)(false),
|
|
59
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
60
|
-
isDragging = _useState4[0],
|
|
61
|
-
setIsDragging = _useState4[1];
|
|
62
|
-
var fileInputRef = (0, _react.useRef)(null);
|
|
63
|
-
function updateInputFiles(files) {
|
|
64
|
-
if (fileInputRef.current) {
|
|
65
|
-
var acceptedFilesFilter = new DataTransfer();
|
|
66
|
-
files.forEach(function (file) {
|
|
67
|
-
var newFile = new File([file.preview], file.name, {
|
|
68
|
-
type: file.type
|
|
69
|
-
});
|
|
70
|
-
acceptedFilesFilter.items.add(newFile);
|
|
71
|
-
});
|
|
72
|
-
fileInputRef.current.files = acceptedFilesFilter.files;
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
function addIdToFiles(files) {
|
|
76
|
-
var filesWithId = files.map(function (file) {
|
|
77
|
-
var newFile = file;
|
|
78
|
-
newFile.id = (0, _generateUUID.generateUUID)();
|
|
79
|
-
newFile.preview = URL.createObjectURL(file);
|
|
80
|
-
return newFile;
|
|
81
|
-
});
|
|
82
|
-
return filesWithId;
|
|
83
|
-
}
|
|
84
|
-
function handleUploadFile(files, isDropEvent) {
|
|
85
|
-
var filterAcceptedFiles = files.filter(function (file) {
|
|
86
|
-
return (0, _accepts.accepts)(file, accept);
|
|
87
|
-
});
|
|
88
|
-
var filterRejectedFiles = files.filter(function (file) {
|
|
89
|
-
return !(0, _accepts.accepts)(file, accept);
|
|
90
|
-
});
|
|
91
|
-
setAcceptedFiles(function (oldValue) {
|
|
92
|
-
var filesWithId = addIdToFiles(filterAcceptedFiles);
|
|
93
|
-
var mergedValues = [].concat(_toConsumableArray(oldValue), _toConsumableArray(filesWithId));
|
|
94
|
-
var newValue = multiple ? mergedValues : filesWithId;
|
|
95
|
-
updateInputFiles(newValue);
|
|
96
|
-
if (filterAcceptedFiles.length > 0 && fileInputRef.current) {
|
|
97
|
-
var allAcceptedFiles = Array.from(fileInputRef.current.files || []);
|
|
98
|
-
onChange === null || onChange === void 0 ? void 0 : onChange(allAcceptedFiles);
|
|
99
|
-
isDropEvent && (onDropAccepted === null || onDropAccepted === void 0 ? void 0 : onDropAccepted(filterAcceptedFiles));
|
|
100
|
-
}
|
|
101
|
-
if (isDropEvent && filterRejectedFiles.length > 0) {
|
|
102
|
-
onDropRejected === null || onDropRejected === void 0 ? void 0 : onDropRejected(filterRejectedFiles);
|
|
103
|
-
}
|
|
104
|
-
return newValue;
|
|
105
|
-
});
|
|
106
|
-
}
|
|
107
|
-
function handleDrop(e) {
|
|
108
|
-
e.preventDefault();
|
|
109
|
-
e.stopPropagation();
|
|
110
|
-
var files = Array.from(e.dataTransfer.files);
|
|
111
|
-
handleUploadFile(files, true);
|
|
112
|
-
setIsDragging(false);
|
|
113
|
-
}
|
|
114
|
-
function handleChange(e) {
|
|
115
|
-
var files = Array.from(e.target.files || []);
|
|
116
|
-
handleUploadFile(files);
|
|
117
|
-
}
|
|
118
|
-
function handleDragEnterLeave(e, type) {
|
|
119
|
-
e.preventDefault();
|
|
120
|
-
e.stopPropagation();
|
|
121
|
-
if (type === 'enter') {
|
|
122
|
-
setIsDragging(true);
|
|
123
|
-
onDragEnter === null || onDragEnter === void 0 ? void 0 : onDragEnter(e);
|
|
124
|
-
} else {
|
|
125
|
-
setIsDragging(false);
|
|
126
|
-
onDragLeave === null || onDragLeave === void 0 ? void 0 : onDragLeave(e);
|
|
127
|
-
}
|
|
128
|
-
}
|
|
129
|
-
function handleRemoveFile(fileId) {
|
|
130
|
-
var filteredFiles = acceptedFiles.filter(function (file) {
|
|
131
|
-
return file.id !== fileId;
|
|
132
|
-
});
|
|
133
|
-
setAcceptedFiles(filteredFiles);
|
|
134
|
-
onChange === null || onChange === void 0 ? void 0 : onChange(filteredFiles);
|
|
135
|
-
if (filteredFiles.length === 0 && fileInputRef.current) {
|
|
136
|
-
fileInputRef.current.value = '';
|
|
137
|
-
fileInputRef.current.files = null;
|
|
138
|
-
}
|
|
139
|
-
}
|
|
140
|
-
var dropzoneVariants = {
|
|
141
|
-
initial: {
|
|
142
|
-
opacity: 0,
|
|
143
|
-
scale: 0.8
|
|
144
|
-
},
|
|
145
|
-
visible: {
|
|
146
|
-
opacity: 1,
|
|
147
|
-
y: 0,
|
|
148
|
-
scale: 1
|
|
149
|
-
},
|
|
150
|
-
hidden: {
|
|
151
|
-
opacity: 0,
|
|
152
|
-
scale: 0.8
|
|
153
|
-
}
|
|
154
|
-
};
|
|
155
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.DropzoneContainer, _objectSpread(_objectSpread({
|
|
156
|
-
isDraggingOver: isDragging,
|
|
157
|
-
isDisabled: disabled,
|
|
158
|
-
alert: alert
|
|
159
|
-
}, rest), {}, {
|
|
160
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.DropzoneInput, {
|
|
161
|
-
ref: fileInputRef,
|
|
162
|
-
type: "file",
|
|
163
|
-
multiple: multiple,
|
|
164
|
-
accept: accept,
|
|
165
|
-
onChange: handleChange,
|
|
166
|
-
onDrop: handleDrop,
|
|
167
|
-
onDragEnter: function onDragEnter(event) {
|
|
168
|
-
return handleDragEnterLeave(event, 'enter');
|
|
169
|
-
},
|
|
170
|
-
onDragLeave: function onDragLeave(event) {
|
|
171
|
-
return handleDragEnterLeave(event, 'leave');
|
|
172
|
-
},
|
|
173
|
-
disabled: disabled
|
|
174
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_framerMotion.AnimatePresence, {
|
|
175
|
-
mode: "wait",
|
|
176
|
-
children: acceptedFiles.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Flex.default, {
|
|
177
|
-
alignItems: "center",
|
|
178
|
-
spacing: "4",
|
|
179
|
-
wrap: "wrap",
|
|
180
|
-
justifyContent: "center",
|
|
181
|
-
children: [acceptedFiles.map(function (file) {
|
|
182
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_framerMotion.motion.div, {
|
|
183
|
-
variants: dropzoneVariants,
|
|
184
|
-
initial: "initial",
|
|
185
|
-
animate: "visible",
|
|
186
|
-
exit: "hidden",
|
|
187
|
-
transition: {
|
|
188
|
-
duration: 0.2,
|
|
189
|
-
ease: 'easeInOut'
|
|
190
|
-
},
|
|
191
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.DropzoneFileBox, {
|
|
192
|
-
disabled: disabled,
|
|
193
|
-
children: [file.type.indexOf('image') !== -1 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
|
|
194
|
-
src: file.preview,
|
|
195
|
-
alt: file.name
|
|
196
|
-
}) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Flex.default, {
|
|
197
|
-
direction: "column",
|
|
198
|
-
spacing: "2",
|
|
199
|
-
justifyContent: "center",
|
|
200
|
-
alignItems: "center",
|
|
201
|
-
style: {
|
|
202
|
-
maxWidth: '100%'
|
|
203
|
-
},
|
|
204
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
|
|
205
|
-
name: file.type.split('/').includes('pdf') ? 'pdf' : file.type.split('/').includes('csv') ? 'csv' : file.type.split('/').includes('xls') ? 'xls' : 'file',
|
|
206
|
-
size: "30",
|
|
207
|
-
color: "neutral.black"
|
|
208
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.DropzoneFilename, {
|
|
209
|
-
children: file.name
|
|
210
|
-
})]
|
|
211
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.DropzoneRemoveButton, {
|
|
212
|
-
onClick: function onClick() {
|
|
213
|
-
return !disabled && handleRemoveFile(file.id);
|
|
214
|
-
},
|
|
215
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
|
|
216
|
-
name: "x",
|
|
217
|
-
color: "background.light",
|
|
218
|
-
size: 25
|
|
219
|
-
})
|
|
220
|
-
})]
|
|
221
|
-
})
|
|
222
|
-
}, file.id);
|
|
223
|
-
}), multiple && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.DropzoneImageAddButton, {
|
|
224
|
-
isDraggingOver: isDragging,
|
|
225
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
|
|
226
|
-
name: "plus-circle",
|
|
227
|
-
color: "neutral.neutral3"
|
|
228
|
-
})
|
|
229
|
-
})]
|
|
230
|
-
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_framerMotion.motion.div, {
|
|
231
|
-
variants: dropzoneVariants,
|
|
232
|
-
initial: "initial",
|
|
233
|
-
animate: "visible",
|
|
234
|
-
exit: "hidden",
|
|
235
|
-
transition: {
|
|
236
|
-
duration: 0.2,
|
|
237
|
-
ease: 'easeInOut'
|
|
238
|
-
},
|
|
239
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Flex.default, {
|
|
240
|
-
direction: "column",
|
|
241
|
-
spacing: "2",
|
|
242
|
-
alignItems: "center",
|
|
243
|
-
justifyContent: "center",
|
|
244
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_framerMotion.motion.div, {
|
|
245
|
-
initial: {
|
|
246
|
-
opacity: 0,
|
|
247
|
-
y: 10
|
|
248
|
-
},
|
|
249
|
-
animate: {
|
|
250
|
-
opacity: 1,
|
|
251
|
-
y: 0
|
|
252
|
-
},
|
|
253
|
-
transition: {
|
|
254
|
-
duration: 0.2,
|
|
255
|
-
ease: 'easeInOut',
|
|
256
|
-
delay: 0.2
|
|
257
|
-
},
|
|
258
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
|
|
259
|
-
name: icon || 'arrow-up-circle',
|
|
260
|
-
size: 48,
|
|
261
|
-
color: "neutral.neutral5"
|
|
262
|
-
})
|
|
263
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Flex.default, {
|
|
264
|
-
direction: "column",
|
|
265
|
-
alignItems: "center",
|
|
266
|
-
children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.DropzoneText, {
|
|
267
|
-
fontWeight: "600",
|
|
268
|
-
fontSize: "xs",
|
|
269
|
-
alert: alert,
|
|
270
|
-
children: title
|
|
271
|
-
}), helperText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.DropzoneText, {
|
|
272
|
-
fontSize: "xxs",
|
|
273
|
-
textAlign: "center",
|
|
274
|
-
color: "neutral.neutral2",
|
|
275
|
-
alert: alert,
|
|
276
|
-
children: helperText || 'ou solte um arquivo aqui'
|
|
277
|
-
})]
|
|
278
|
-
}), !disabledButton && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
|
|
279
|
-
variant: "outline",
|
|
280
|
-
bgColor: "neutral.neutral4",
|
|
281
|
-
children: [buttonText || 'Selecionar um arquivo', ' ']
|
|
282
|
-
})]
|
|
283
|
-
})
|
|
284
|
-
})
|
|
285
|
-
})]
|
|
286
|
-
}));
|
|
287
|
-
};
|
|
288
|
-
var _default = Dropzone;
|
|
289
|
-
exports.default = _default;
|
|
1
|
+
"use strict";function _typeof(obj){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(obj){return typeof obj}:function(obj){return obj&&"function"==typeof Symbol&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj},_typeof(obj)}Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=require("react"),_framerMotion=require("framer-motion"),_Icon=_interopRequireDefault(require("../Icon")),_Flex=_interopRequireDefault(require("../Flex")),_Button=_interopRequireDefault(require("../Button")),_styles=require("./styles"),_accepts=require("./utils/accepts"),_generateUUID=require("../../utils/generateUUID"),_jsxRuntime=require("react/jsx-runtime"),_excluded=["icon","title","disabledButton","buttonText","alert","helperText","multiple","onChange","onDropAccepted","onDropRejected","accept","onDragEnter","onDragLeave","disabled"];function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable})),keys.push.apply(keys,symbols)}return keys}function _objectSpread(target){for(var source,i=1;i<arguments.length;i++)source=null==arguments[i]?{}:arguments[i],i%2?ownKeys(Object(source),!0).forEach(function(key){_defineProperty(target,key,source[key])}):Object.getOwnPropertyDescriptors?Object.defineProperties(target,Object.getOwnPropertyDescriptors(source)):ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key))});return target}function _defineProperty(obj,key,value){return key=_toPropertyKey(key),key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}function _toPropertyKey(arg){var key=_toPrimitive(arg,"string");return"symbol"===_typeof(key)?key:key+""}function _toPrimitive(input,hint){if("object"!==_typeof(input)||null===input)return input;var prim=input[Symbol.toPrimitive];if(prim!==void 0){var res=prim.call(input,hint||"default");if("object"!==_typeof(res))return res;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===hint?String:Number)(input)}function _toConsumableArray(arr){return _arrayWithoutHoles(arr)||_iterableToArray(arr)||_unsupportedIterableToArray(arr)||_nonIterableSpread()}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _iterableToArray(iter){if("undefined"!=typeof Symbol&&null!=iter[Symbol.iterator]||null!=iter["@@iterator"])return Array.from(iter)}function _arrayWithoutHoles(arr){if(Array.isArray(arr))return _arrayLikeToArray(arr)}function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_unsupportedIterableToArray(arr,i)||_nonIterableRest()}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _unsupportedIterableToArray(o,minLen){if(o){if("string"==typeof o)return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);return"Object"===n&&o.constructor&&(n=o.constructor.name),"Map"===n||"Set"===n?Array.from(o):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?_arrayLikeToArray(o,minLen):void 0}}function _arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=Array(len);i<len;i++)arr2[i]=arr[i];return arr2}function _iterableToArrayLimit(arr,i){var _i=null==arr?null:"undefined"!=typeof Symbol&&arr[Symbol.iterator]||arr["@@iterator"];if(null!=_i){var _s,_e,_x,_r,_arr=[],_n=!0,_d=!1;try{if(_x=(_i=_i.call(arr)).next,0===i){if(Object(_i)!==_i)return;_n=!1}else for(;!(_n=(_s=_x.call(_i)).done)&&(_arr.push(_s.value),_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{if(!_n&&null!=_i.return&&(_r=_i.return(),Object(_r)!==_r))return}finally{if(_d)throw _e}}return _arr}}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=_objectWithoutPropertiesLoose(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],0<=excluded.indexOf(key)||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],0<=excluded.indexOf(key)||(target[key]=source[key]);return target}var Dropzone=function(_ref){function updateInputFiles(files){if(fileInputRef.current){var acceptedFilesFilter=new DataTransfer;files.forEach(function(file){var newFile=new File([file.preview],file.name,{type:file.type});acceptedFilesFilter.items.add(newFile)}),fileInputRef.current.files=acceptedFilesFilter.files}}function addIdToFiles(files){var filesWithId=files.map(function(file){var newFile=file;return newFile.id=(0,_generateUUID.generateUUID)(),newFile.preview=URL.createObjectURL(file),newFile});return filesWithId}function handleUploadFile(files,isDropEvent){var filterAcceptedFiles=files.filter(function(file){return(0,_accepts.accepts)(file,accept)}),filterRejectedFiles=files.filter(function(file){return!(0,_accepts.accepts)(file,accept)});setAcceptedFiles(function(oldValue){var filesWithId=addIdToFiles(filterAcceptedFiles),mergedValues=[].concat(_toConsumableArray(oldValue),_toConsumableArray(filesWithId)),newValue=multiple?mergedValues:filesWithId;if(updateInputFiles(newValue),0<filterAcceptedFiles.length&&fileInputRef.current){var allAcceptedFiles=Array.from(fileInputRef.current.files||[]);null===onChange||void 0===onChange?void 0:onChange(allAcceptedFiles),isDropEvent&&(null===onDropAccepted||void 0===onDropAccepted?void 0:onDropAccepted(filterAcceptedFiles))}return isDropEvent&&0<filterRejectedFiles.length&&(null===onDropRejected||void 0===onDropRejected?void 0:onDropRejected(filterRejectedFiles)),newValue})}function handleDragEnterLeave(e,type){e.preventDefault(),e.stopPropagation(),"enter"===type?(setIsDragging(!0),null===onDragEnter||void 0===onDragEnter?void 0:onDragEnter(e)):(setIsDragging(!1),null===onDragLeave||void 0===onDragLeave?void 0:onDragLeave(e))}function handleRemoveFile(fileId){var filteredFiles=acceptedFiles.filter(function(file){return file.id!==fileId});setAcceptedFiles(filteredFiles),null===onChange||void 0===onChange?void 0:onChange(filteredFiles),0===filteredFiles.length&&fileInputRef.current&&(fileInputRef.current.value="",fileInputRef.current.files=null)}var icon=_ref.icon,title=_ref.title,_ref$disabledButton=_ref.disabledButton,buttonText=_ref.buttonText,alert=_ref.alert,helperText=_ref.helperText,multiple=_ref.multiple,onChange=_ref.onChange,onDropAccepted=_ref.onDropAccepted,onDropRejected=_ref.onDropRejected,_ref$accept=_ref.accept,accept=void 0===_ref$accept?"":_ref$accept,onDragEnter=_ref.onDragEnter,onDragLeave=_ref.onDragLeave,disabled=_ref.disabled,rest=_objectWithoutProperties(_ref,_excluded),_useState=(0,_react.useState)([]),_useState2=_slicedToArray(_useState,2),acceptedFiles=_useState2[0],setAcceptedFiles=_useState2[1],_useState3=(0,_react.useState)(!1),_useState4=_slicedToArray(_useState3,2),isDragging=_useState4[0],setIsDragging=_useState4[1],fileInputRef=(0,_react.useRef)(null),dropzoneVariants={initial:{opacity:0,scale:.8},visible:{opacity:1,y:0,scale:1},hidden:{opacity:0,scale:.8}};return/*#__PURE__*/(0,_jsxRuntime.jsxs)(_styles.DropzoneContainer,_objectSpread(_objectSpread({isDraggingOver:isDragging,isDisabled:disabled,alert:alert},rest),{},{children:[/*#__PURE__*/(0,_jsxRuntime.jsx)(_styles.DropzoneInput,{ref:fileInputRef,type:"file",multiple:multiple,accept:accept,onChange:function(e){var files=Array.from(e.target.files||[]);handleUploadFile(files)},onDrop:function(e){e.preventDefault(),e.stopPropagation();var files=Array.from(e.dataTransfer.files);handleUploadFile(files,!0),setIsDragging(!1)},onDragEnter:function(event){return handleDragEnterLeave(event,"enter")},onDragLeave:function(event){return handleDragEnterLeave(event,"leave")},disabled:disabled}),/*#__PURE__*/(0,_jsxRuntime.jsx)(_framerMotion.AnimatePresence,{mode:"wait",children:0<acceptedFiles.length?/*#__PURE__*/(0,_jsxRuntime.jsxs)(_Flex.default,{alignItems:"center",spacing:"4",wrap:"wrap",justifyContent:"center",children:[acceptedFiles.map(function(file){return/*#__PURE__*/(0,_jsxRuntime.jsx)(_framerMotion.motion.div,{variants:dropzoneVariants,initial:"initial",animate:"visible",exit:"hidden",transition:{duration:.2,ease:"easeInOut"},children:/*#__PURE__*/(0,_jsxRuntime.jsxs)(_styles.DropzoneFileBox,{disabled:disabled,children:[-1===file.type.indexOf("image")?/*#__PURE__*/(0,_jsxRuntime.jsxs)(_Flex.default,{direction:"column",spacing:"2",justifyContent:"center",alignItems:"center",style:{maxWidth:"100%"},children:[/*#__PURE__*/(0,_jsxRuntime.jsx)(_Icon.default,{name:file.type.split("/").includes("pdf")?"pdf":file.type.split("/").includes("csv")?"csv":file.type.split("/").includes("xls")?"xls":"file",size:"30",color:"neutral.black"}),/*#__PURE__*/(0,_jsxRuntime.jsx)(_styles.DropzoneFilename,{children:file.name})]}):/*#__PURE__*/(0,_jsxRuntime.jsx)("img",{src:file.preview,alt:file.name}),/*#__PURE__*/(0,_jsxRuntime.jsx)(_styles.DropzoneRemoveButton,{onClick:function onClick(){return!disabled&&handleRemoveFile(file.id)},children:/*#__PURE__*/(0,_jsxRuntime.jsx)(_Icon.default,{name:"x",color:"background.light",size:25})})]})},file.id)}),multiple&&/*#__PURE__*/(0,_jsxRuntime.jsx)(_styles.DropzoneImageAddButton,{isDraggingOver:isDragging,children:/*#__PURE__*/(0,_jsxRuntime.jsx)(_Icon.default,{name:"plus-circle",color:"neutral.neutral3"})})]}):/*#__PURE__*/(0,_jsxRuntime.jsx)(_framerMotion.motion.div,{variants:dropzoneVariants,initial:"initial",animate:"visible",exit:"hidden",transition:{duration:.2,ease:"easeInOut"},children:/*#__PURE__*/(0,_jsxRuntime.jsxs)(_Flex.default,{direction:"column",spacing:"2",alignItems:"center",justifyContent:"center",children:[/*#__PURE__*/(0,_jsxRuntime.jsx)(_framerMotion.motion.div,{initial:{opacity:0,y:10},animate:{opacity:1,y:0},transition:{duration:.2,ease:"easeInOut",delay:.2},children:/*#__PURE__*/(0,_jsxRuntime.jsx)(_Icon.default,{name:icon||"arrow-up-circle",size:48,color:"neutral.neutral5"})}),/*#__PURE__*/(0,_jsxRuntime.jsxs)(_Flex.default,{direction:"column",alignItems:"center",children:[title&&/*#__PURE__*/(0,_jsxRuntime.jsx)(_styles.DropzoneText,{fontWeight:"600",fontSize:"xs",alert:alert,children:title}),helperText&&/*#__PURE__*/(0,_jsxRuntime.jsx)(_styles.DropzoneText,{fontSize:"xxs",textAlign:"center",color:"neutral.neutral2",alert:alert,children:helperText||"ou solte um arquivo aqui"})]}),!(void 0!==_ref$disabledButton&&_ref$disabledButton)&&/*#__PURE__*/(0,_jsxRuntime.jsxs)(_Button.default,{variant:"outline",bgColor:"neutral.neutral4",children:[buttonText||"Selecionar um arquivo"," "]})]})})})]}))},_default=Dropzone;exports.default=_default;
|