@pedidopago/ui 1.7.26 → 1.8.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/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 +5 -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,44 +1 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.SelectedOptionSpan = exports.SelectMultipleOption = exports.SelectContainer = exports.OptionPlaceholder = exports.HelperText = void 0;
|
|
7
|
-
var _react = require("@emotion/react");
|
|
8
|
-
var _styled = _interopRequireDefault(require("@emotion/styled"));
|
|
9
|
-
var _List = _interopRequireDefault(require("../List"));
|
|
10
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
|
|
11
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
12
|
-
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
13
|
-
var SelectContainer = _styled.default.div(function (_ref) {
|
|
14
|
-
var theme = _ref.theme,
|
|
15
|
-
alert = _ref.alert;
|
|
16
|
-
return (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n outline: none;\n user-select: none;\n width: 100%;\n min-height: 56px;\n border-radius: ", ";\n border: 2px solid ", ";\n transition: all ease 0.2s;\n outline: 0px solid transparent;\n cursor: pointer;\n background: ", ";\n color: ", ";\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.5rem;\n padding: 0 20px;\n position: relative;\n\n &:hover {\n color: ", ";\n border-color: ", ";\n\n label {\n color: ", ";\n }\n }\n\n &:focus {\n color: ", ";\n border-color: ", ";\n outline: 2px solid ", ";\n\n .select_container_icon {\n transform: rotate(180deg);\n }\n }\n\n &[data-label-in-top='true'] {\n label {\n left: 20px;\n top: -1px;\n font-size: 0.875rem;\n background: ", " !important;\n }\n }\n\n &[data-disabled='true'] {\n background: ", ";\n pointer-events: none;\n cursor: none;\n border-color: ", ";\n\n label {\n background: inherit;\n }\n }\n\n &[data-variant='unstyled'] {\n padding: 0;\n border: none;\n background: none;\n height: auto;\n\n &:hover,\n &:focus {\n outline: none;\n }\n }\n\n input {\n display: none;\n }\n\n .select_container_icon {\n transition: all ease 0.2s;\n }\n\n label {\n position: absolute;\n left: 20px;\n top: 50%;\n transform: translateY(-50%);\n font-size: 1rem;\n font-weight: 500;\n color: ", ";\n transition: all ease 0.2s;\n padding: 0 4px;\n z-index: 1;\n white-space: nowrap;\n max-width: 65%;\n overflow: hidden;\n cursor: pointer;\n text-overflow: ellipsis;\n }\n "])), theme.borderRadius.default, alert ? theme.colors[alert].blurred : theme.colors.neutral.neutral2, alert ? "".concat(theme.colors[alert].blurred, "33") : theme.colors.neutral.white, theme.colors.neutral.neutral5, theme.colors.neutral.black, alert ? theme.colors[alert].default : theme.colors.primary.hover, theme.colors.neutral.neutral5, theme.colors.neutral.black, alert ? theme.colors[alert].default : theme.colors.primary.focus, alert ? theme.colors[alert].blurred : theme.colors.primary.disabled, theme.colors.neutral.white, theme.colors.neutral.neutral1, theme.colors.neutral.neutral2, theme.colors.neutral.neutral3);
|
|
17
|
-
});
|
|
18
|
-
exports.SelectContainer = SelectContainer;
|
|
19
|
-
var OptionPlaceholder = (0, _styled.default)(_List.default)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n color: ", ";\n"])), function (_ref2) {
|
|
20
|
-
var theme = _ref2.theme;
|
|
21
|
-
return theme.colors.neutral.neutral3;
|
|
22
|
-
});
|
|
23
|
-
exports.OptionPlaceholder = OptionPlaceholder;
|
|
24
|
-
var HelperText = _styled.default.span(function (_ref3) {
|
|
25
|
-
var theme = _ref3.theme,
|
|
26
|
-
_ref3$alert = _ref3.alert,
|
|
27
|
-
alert = _ref3$alert === void 0 ? 'success' : _ref3$alert;
|
|
28
|
-
return (0, _react.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n font-size: ", ";\n color: ", ";\n padding: 0 20px;\n "])), theme.fontSizes.xxs, alert !== 'success' ? theme.colors[alert].default : theme.colors.neutral.neutral4);
|
|
29
|
-
});
|
|
30
|
-
exports.HelperText = HelperText;
|
|
31
|
-
var SelectMultipleOption = _styled.default.button(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n min-width: 73px;\n height: 29px;\n padding: 4px 8px;\n border-radius: 6px;\n margin: 2px;\n\n transition: all ease-in-out 0.2s;\n\n background-color: ", ";\n\n border: 0;\n color: ", ";\n\n &:not(&:disabled) {\n cursor: pointer;\n }\n"])), function (_ref4) {
|
|
32
|
-
var theme = _ref4.theme;
|
|
33
|
-
return theme.colors.neutral.neutral1;
|
|
34
|
-
}, function (_ref5) {
|
|
35
|
-
var theme = _ref5.theme;
|
|
36
|
-
return theme.colors.neutral.neutral6;
|
|
37
|
-
});
|
|
38
|
-
exports.SelectMultipleOption = SelectMultipleOption;
|
|
39
|
-
var SelectedOptionSpan = _styled.default.span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n font-weight: 500;\n cursor: pointer;\n padding-block: 0.25rem;\n color: ", ";\n"])), function (_ref6) {
|
|
40
|
-
var theme = _ref6.theme,
|
|
41
|
-
hasSelectedOption = _ref6.hasSelectedOption;
|
|
42
|
-
return hasSelectedOption ? theme.colors.neutral.neutral5 : theme.colors.neutral.neutral3;
|
|
43
|
-
});
|
|
44
|
-
exports.SelectedOptionSpan = SelectedOptionSpan;
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.SelectedOptionSpan=exports.SelectMultipleOption=exports.SelectContainer=exports.OptionPlaceholder=exports.HelperText=void 0;var _templateObject,_templateObject2,_templateObject3,_templateObject4,_templateObject5,_react=require("@emotion/react"),_styled=_interopRequireDefault(require("@emotion/styled")),_List=_interopRequireDefault(require("../List"));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 SelectContainer=_styled.default.div(function(_ref){var theme=_ref.theme,alert=_ref.alert;return(0,_react.css)(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n outline: none;\n user-select: none;\n width: 100%;\n min-height: 56px;\n border-radius: ",";\n border: 2px solid ",";\n transition: all ease 0.2s;\n outline: 0px solid transparent;\n cursor: pointer;\n background: ",";\n color: ",";\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.5rem;\n padding: 0 20px;\n position: relative;\n\n &:hover {\n color: ",";\n border-color: ",";\n\n label {\n color: ",";\n }\n }\n\n &:focus {\n color: ",";\n border-color: ",";\n outline: 2px solid ",";\n\n .select_container_icon {\n transform: rotate(180deg);\n }\n }\n\n &[data-label-in-top='true'] {\n label {\n left: 20px;\n top: -1px;\n font-size: 0.875rem;\n background: "," !important;\n }\n }\n\n &[data-disabled='true'] {\n background: ",";\n pointer-events: none;\n cursor: none;\n border-color: ",";\n\n label {\n background: inherit;\n }\n }\n\n &[data-variant='unstyled'] {\n padding: 0;\n border: none;\n background: none;\n height: auto;\n\n &:hover,\n &:focus {\n outline: none;\n }\n }\n\n input {\n display: none;\n }\n\n .select_container_icon {\n transition: all ease 0.2s;\n }\n\n label {\n position: absolute;\n left: 20px;\n top: 50%;\n transform: translateY(-50%);\n font-size: 1rem;\n font-weight: 500;\n color: ",";\n transition: all ease 0.2s;\n padding: 0 4px;\n z-index: 1;\n white-space: nowrap;\n max-width: 65%;\n overflow: hidden;\n cursor: pointer;\n text-overflow: ellipsis;\n }\n "])),theme.borderRadius.default,alert?theme.colors[alert].blurred:theme.colors.neutral.neutral2,alert?"".concat(theme.colors[alert].blurred,"33"):theme.colors.neutral.white,theme.colors.neutral.neutral5,theme.colors.neutral.black,alert?theme.colors[alert].default:theme.colors.primary.hover,theme.colors.neutral.neutral5,theme.colors.neutral.black,alert?theme.colors[alert].default:theme.colors.primary.focus,alert?theme.colors[alert].blurred:theme.colors.primary.disabled,theme.colors.neutral.white,theme.colors.neutral.neutral1,theme.colors.neutral.neutral2,theme.colors.neutral.neutral3)});exports.SelectContainer=SelectContainer;var OptionPlaceholder=(0,_styled.default)(_List.default)(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["\n color: ",";\n"])),function(_ref2){var theme=_ref2.theme;return theme.colors.neutral.neutral3});exports.OptionPlaceholder=OptionPlaceholder;var HelperText=_styled.default.span(function(_ref3){var theme=_ref3.theme,_ref3$alert=_ref3.alert,alert=void 0===_ref3$alert?"success":_ref3$alert;return(0,_react.css)(_templateObject3||(_templateObject3=_taggedTemplateLiteral(["\n font-size: ",";\n color: ",";\n padding: 0 20px;\n "])),theme.fontSizes.xxs,"success"===alert?theme.colors.neutral.neutral4:theme.colors[alert].default)});exports.HelperText=HelperText;var SelectMultipleOption=_styled.default.button(_templateObject4||(_templateObject4=_taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n min-width: 73px;\n height: 29px;\n padding: 4px 8px;\n border-radius: 6px;\n margin: 2px;\n\n transition: all ease-in-out 0.2s;\n\n background-color: ",";\n\n border: 0;\n color: ",";\n\n &:not(&:disabled) {\n cursor: pointer;\n }\n"])),function(_ref4){var theme=_ref4.theme;return theme.colors.neutral.neutral1},function(_ref5){var theme=_ref5.theme;return theme.colors.neutral.neutral6});exports.SelectMultipleOption=SelectMultipleOption;var SelectedOptionSpan=_styled.default.span(_templateObject5||(_templateObject5=_taggedTemplateLiteral(["\n font-weight: 500;\n cursor: pointer;\n padding-block: 0.25rem;\n color: ",";\n"])),function(_ref6){var theme=_ref6.theme,hasSelectedOption=_ref6.hasSelectedOption;return hasSelectedOption?theme.colors.neutral.neutral5:theme.colors.neutral.neutral3});exports.SelectedOptionSpan=SelectedOptionSpan;
|
|
@@ -1,59 +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.Observer = Observer;
|
|
8
|
-
var _react = require("react");
|
|
9
|
-
var _jsxRuntime = require("react/jsx-runtime");
|
|
10
|
-
var _excluded = ["onObserved", "observerOptions", "children"];
|
|
11
|
-
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; }
|
|
12
|
-
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; }
|
|
13
|
-
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; }
|
|
14
|
-
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
15
|
-
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); }
|
|
16
|
-
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
17
|
-
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."); }
|
|
18
|
-
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); }
|
|
19
|
-
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; }
|
|
20
|
-
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; } }
|
|
21
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
22
|
-
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; }
|
|
23
|
-
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; }
|
|
24
|
-
function Observer(_ref) {
|
|
25
|
-
var onObserved = _ref.onObserved,
|
|
26
|
-
observerOptions = _ref.observerOptions,
|
|
27
|
-
children = _ref.children,
|
|
28
|
-
props = _objectWithoutProperties(_ref, _excluded);
|
|
29
|
-
var observerRef = (0, _react.useRef)(null);
|
|
30
|
-
(0, _react.useEffect)(function () {
|
|
31
|
-
if (!observerRef.current) return;
|
|
32
|
-
var options = observerOptions || {
|
|
33
|
-
rootMargin: '0px',
|
|
34
|
-
threshold: 1
|
|
35
|
-
};
|
|
36
|
-
var observer = new IntersectionObserver(function (_ref2) {
|
|
37
|
-
var _ref3 = _slicedToArray(_ref2, 1),
|
|
38
|
-
entry = _ref3[0];
|
|
39
|
-
if (entry.isIntersecting) {
|
|
40
|
-
onObserved();
|
|
41
|
-
}
|
|
42
|
-
}, options);
|
|
43
|
-
observer.observe(observerRef.current);
|
|
44
|
-
return function () {
|
|
45
|
-
if (!observerRef.current) return;
|
|
46
|
-
observer.unobserve(observerRef.current);
|
|
47
|
-
};
|
|
48
|
-
}, [onObserved]);
|
|
49
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({
|
|
50
|
-
id: "observer-component",
|
|
51
|
-
style: {
|
|
52
|
-
display: 'block'
|
|
53
|
-
},
|
|
54
|
-
ref: observerRef
|
|
55
|
-
}, props), {}, {
|
|
56
|
-
children: children
|
|
57
|
-
}));
|
|
58
|
-
}
|
|
59
|
-
Observer.displayName = 'Observer';
|
|
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.Observer=Observer;var _react=require("react"),_jsxRuntime=require("react/jsx-runtime"),_excluded=["onObserved","observerOptions","children"];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 _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}function Observer(_ref){var onObserved=_ref.onObserved,observerOptions=_ref.observerOptions,children=_ref.children,props=_objectWithoutProperties(_ref,_excluded),observerRef=(0,_react.useRef)(null);return(0,_react.useEffect)(function(){if(observerRef.current){var observer=new IntersectionObserver(function(_ref2){var _ref3=_slicedToArray(_ref2,1),entry=_ref3[0];entry.isIntersecting&&onObserved()},observerOptions||{rootMargin:"0px",threshold:1});return observer.observe(observerRef.current),function(){observerRef.current&&observer.unobserve(observerRef.current)}}},[onObserved]),/*#__PURE__*/(0,_jsxRuntime.jsx)("div",_objectSpread(_objectSpread({id:"observer-component",style:{display:"block"},ref:observerRef},props),{},{children:children}))}Observer.displayName="Observer";
|
|
@@ -1,43 +1,2 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _react = require("@testing-library/react");
|
|
4
|
-
var _ = require(".");
|
|
5
|
-
var _jsxRuntime = require("react/jsx-runtime");
|
|
6
|
-
function setup(_ref) {
|
|
7
|
-
var onObserved = _ref.onObserved;
|
|
8
|
-
// Mock the IntersectionObserver and trigger the onObserved function
|
|
9
|
-
var mockIntersectionObserver = jest.fn();
|
|
10
|
-
window.IntersectionObserver = mockIntersectionObserver;
|
|
11
|
-
mockIntersectionObserver.mockReturnValue({
|
|
12
|
-
observe: function observe() {
|
|
13
|
-
return null;
|
|
14
|
-
},
|
|
15
|
-
unobserve: function unobserve() {
|
|
16
|
-
return null;
|
|
17
|
-
},
|
|
18
|
-
disconnect: function disconnect() {
|
|
19
|
-
return null;
|
|
20
|
-
}
|
|
21
|
-
});
|
|
22
|
-
var renderResult = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Observer, {
|
|
23
|
-
onObserved: onObserved,
|
|
24
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
25
|
-
id: "child-element",
|
|
26
|
-
children: "Child Element"
|
|
27
|
-
})
|
|
28
|
-
}));
|
|
29
|
-
var observerComponent = renderResult.container.querySelector('#observer-component');
|
|
30
|
-
observerComponent && mockIntersectionObserver.mock.calls[0][0]([{
|
|
31
|
-
isIntersecting: true
|
|
32
|
-
}]);
|
|
33
|
-
return renderResult;
|
|
34
|
-
}
|
|
35
|
-
describe('Observer', function () {
|
|
36
|
-
it('should call the onObserved function when the component is intersecting', function () {
|
|
37
|
-
var onObserved = jest.fn();
|
|
38
|
-
setup({
|
|
39
|
-
onObserved: onObserved
|
|
40
|
-
});
|
|
41
|
-
expect(onObserved).toHaveBeenCalledTimes(1);
|
|
42
|
-
});
|
|
43
|
-
});
|
|
1
|
+
"use strict";var _react=require("@testing-library/react"),_=require("."),_jsxRuntime=require("react/jsx-runtime");function setup(_ref){var onObserved=_ref.onObserved,mockIntersectionObserver=jest.fn();// Mock the IntersectionObserver and trigger the onObserved function
|
|
2
|
+
window.IntersectionObserver=mockIntersectionObserver,mockIntersectionObserver.mockReturnValue({observe:function observe(){return null},unobserve:function unobserve(){return null},disconnect:function disconnect(){return null}});var renderResult=(0,_react.render)(/*#__PURE__*/(0,_jsxRuntime.jsx)(_.Observer,{onObserved:onObserved,children:/*#__PURE__*/(0,_jsxRuntime.jsx)("div",{id:"child-element",children:"Child Element"})})),observerComponent=renderResult.container.querySelector("#observer-component");return observerComponent&&mockIntersectionObserver.mock.calls[0][0]([{isIntersecting:!0}]),renderResult}describe("Observer",function(){it("should call the onObserved function when the component is intersecting",function(){var onObserved=jest.fn();setup({onObserved:onObserved}),expect(onObserved).toHaveBeenCalledTimes(1)})});
|
|
@@ -1,57 +1 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.usePagination = exports.DOTS = void 0;
|
|
7
|
-
var _react = require("react");
|
|
8
|
-
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
|
9
|
-
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."); }
|
|
10
|
-
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); }
|
|
11
|
-
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
|
12
|
-
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
|
13
|
-
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; }
|
|
14
|
-
var DOTS = '...';
|
|
15
|
-
exports.DOTS = DOTS;
|
|
16
|
-
var range = function range(start, end) {
|
|
17
|
-
var length = end - start + 1;
|
|
18
|
-
return Array.from({
|
|
19
|
-
length: length
|
|
20
|
-
}, function (_, idx) {
|
|
21
|
-
return idx + start;
|
|
22
|
-
});
|
|
23
|
-
};
|
|
24
|
-
var usePagination = function usePagination(_ref) {
|
|
25
|
-
var count = _ref.count,
|
|
26
|
-
activePage = _ref.activePage;
|
|
27
|
-
var paginationRange = (0, _react.useMemo)(function () {
|
|
28
|
-
var totalPageCount = count;
|
|
29
|
-
var siblingCount = 1;
|
|
30
|
-
var totalPageNumbers = siblingCount + 5;
|
|
31
|
-
if (totalPageNumbers >= totalPageCount) {
|
|
32
|
-
return range(1, totalPageCount);
|
|
33
|
-
}
|
|
34
|
-
var leftSiblingIndex = Math.max(activePage - siblingCount, 1);
|
|
35
|
-
var rightSiblingIndex = Math.min(activePage + siblingCount, totalPageCount);
|
|
36
|
-
var shouldShowLeftDots = leftSiblingIndex > 2;
|
|
37
|
-
var shouldShowRightDots = rightSiblingIndex < totalPageCount - 2;
|
|
38
|
-
var firstPageIndex = 1;
|
|
39
|
-
var lastPageIndex = totalPageCount;
|
|
40
|
-
if (!shouldShowLeftDots && shouldShowRightDots) {
|
|
41
|
-
var leftItemCount = 3 + 2 * siblingCount;
|
|
42
|
-
var leftRange = range(1, leftItemCount);
|
|
43
|
-
return [].concat(_toConsumableArray(leftRange), [DOTS, totalPageCount]);
|
|
44
|
-
}
|
|
45
|
-
if (shouldShowLeftDots && !shouldShowRightDots) {
|
|
46
|
-
var rightItemCount = 3 + 2 * siblingCount;
|
|
47
|
-
var rightRange = range(totalPageCount - rightItemCount + 1, totalPageCount);
|
|
48
|
-
return [firstPageIndex, DOTS].concat(_toConsumableArray(rightRange));
|
|
49
|
-
}
|
|
50
|
-
if (shouldShowLeftDots && shouldShowRightDots) {
|
|
51
|
-
var middleRange = range(leftSiblingIndex, rightSiblingIndex);
|
|
52
|
-
return [firstPageIndex, DOTS].concat(_toConsumableArray(middleRange), [DOTS, lastPageIndex]);
|
|
53
|
-
}
|
|
54
|
-
}, [activePage, count]);
|
|
55
|
-
return paginationRange;
|
|
56
|
-
};
|
|
57
|
-
exports.usePagination = usePagination;
|
|
1
|
+
"use strict";var _react=require("react");Object.defineProperty(exports,"__esModule",{value:!0}),exports.usePagination=exports.DOTS=void 0;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 _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 _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 _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}var DOTS="...";exports.DOTS=DOTS;var range=function(start,end){return Array.from({length:end-start+1},function(_,idx){return idx+start})},usePagination=function(_ref){var count=_ref.count,activePage=_ref.activePage,paginationRange=(0,_react.useMemo)(function(){var totalPageCount=count,siblingCount=1;if(siblingCount+5>=totalPageCount)return range(1,totalPageCount);var leftSiblingIndex=Math.max(activePage-siblingCount,1),rightSiblingIndex=Math.min(activePage+siblingCount,totalPageCount),shouldShowLeftDots=2<leftSiblingIndex,shouldShowRightDots=rightSiblingIndex<totalPageCount-2,firstPageIndex=1;if(!shouldShowLeftDots&&shouldShowRightDots){var leftRange=range(1,3+2*siblingCount);return[].concat(_toConsumableArray(leftRange),[DOTS,totalPageCount])}if(shouldShowLeftDots&&!shouldShowRightDots){var rightRange=range(totalPageCount-(3+2*siblingCount)+1,totalPageCount);return[firstPageIndex,DOTS].concat(_toConsumableArray(rightRange))}if(shouldShowLeftDots&&shouldShowRightDots){var middleRange=range(leftSiblingIndex,rightSiblingIndex);return[firstPageIndex,DOTS].concat(_toConsumableArray(middleRange),[DOTS,totalPageCount])}},[activePage,count]);return paginationRange};exports.usePagination=usePagination;
|
|
@@ -1,174 +1 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.Pagination = Pagination;
|
|
7
|
-
var _react = require("react");
|
|
8
|
-
var _Icon = _interopRequireDefault(require("../Icon"));
|
|
9
|
-
var _colorToGray = require("../../utils/colorToGray");
|
|
10
|
-
var _usePagination = require("./hooks/usePagination");
|
|
11
|
-
var _styles = require("./styles");
|
|
12
|
-
var _theme = require("../../shared/theme");
|
|
13
|
-
var _jsxRuntime = require("react/jsx-runtime");
|
|
14
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
|
-
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
16
|
-
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."); }
|
|
17
|
-
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); }
|
|
18
|
-
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; }
|
|
19
|
-
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; } }
|
|
20
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
21
|
-
function Pagination(_ref) {
|
|
22
|
-
var count = _ref.count,
|
|
23
|
-
onChange = _ref.onChange,
|
|
24
|
-
_ref$previousButtonIc = _ref.previousButtonIcon,
|
|
25
|
-
previousButtonIcon = _ref$previousButtonIc === void 0 ? 'chevron-left' : _ref$previousButtonIc,
|
|
26
|
-
_ref$nextButtonIcon = _ref.nextButtonIcon,
|
|
27
|
-
nextButtonIcon = _ref$nextButtonIcon === void 0 ? 'chevron-right' : _ref$nextButtonIcon,
|
|
28
|
-
isDisabled = _ref.isDisabled,
|
|
29
|
-
defaultPage = _ref.defaultPage,
|
|
30
|
-
_ref$size = _ref.size,
|
|
31
|
-
size = _ref$size === void 0 ? 'large' : _ref$size,
|
|
32
|
-
_ref$shape = _ref.shape,
|
|
33
|
-
shape = _ref$shape === void 0 ? 'rounded' : _ref$shape,
|
|
34
|
-
_ref$variant = _ref.variant,
|
|
35
|
-
variant = _ref$variant === void 0 ? 'outlined' : _ref$variant,
|
|
36
|
-
color = _ref.color;
|
|
37
|
-
var _useState = (0, _react.useState)(defaultPage || 1),
|
|
38
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
39
|
-
activePage = _useState2[0],
|
|
40
|
-
setActivePage = _useState2[1];
|
|
41
|
-
var pagination = (0, _usePagination.usePagination)({
|
|
42
|
-
activePage: activePage,
|
|
43
|
-
count: count
|
|
44
|
-
});
|
|
45
|
-
var _useState3 = (0, _react.useState)(false),
|
|
46
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
47
|
-
previousButtonDisabled = _useState4[0],
|
|
48
|
-
setPreviousButtonDisabled = _useState4[1];
|
|
49
|
-
var _useState5 = (0, _react.useState)(false),
|
|
50
|
-
_useState6 = _slicedToArray(_useState5, 2),
|
|
51
|
-
nextButtonDisabled = _useState6[0],
|
|
52
|
-
setNextButtonDisabled = _useState6[1];
|
|
53
|
-
var _useTheme = (0, _theme.useTheme)(),
|
|
54
|
-
theme = _useTheme.theme;
|
|
55
|
-
(0, _react.useEffect)(function () {
|
|
56
|
-
if (activePage !== count) {
|
|
57
|
-
setNextButtonDisabled(false);
|
|
58
|
-
} else {
|
|
59
|
-
setNextButtonDisabled(true);
|
|
60
|
-
}
|
|
61
|
-
if (activePage === 1) {
|
|
62
|
-
setPreviousButtonDisabled(true);
|
|
63
|
-
} else {
|
|
64
|
-
setPreviousButtonDisabled(false);
|
|
65
|
-
}
|
|
66
|
-
}, [activePage, count]);
|
|
67
|
-
(0, _react.useEffect)(function () {
|
|
68
|
-
onChange === null || onChange === void 0 ? void 0 : onChange(activePage);
|
|
69
|
-
}, [activePage]);
|
|
70
|
-
var _useMemo = (0, _react.useMemo)(function () {
|
|
71
|
-
var themeColor = theme.colors.primary.default;
|
|
72
|
-
var _convertColor = (0, _colorToGray.convertColor)(color || themeColor),
|
|
73
|
-
neutral2 = _convertColor.neutral2;
|
|
74
|
-
var grayColorByTheme = neutral2;
|
|
75
|
-
var _grayColorByTheme = _slicedToArray(grayColorByTheme, 3),
|
|
76
|
-
h = _grayColorByTheme[0],
|
|
77
|
-
s = _grayColorByTheme[1],
|
|
78
|
-
l = _grayColorByTheme[2];
|
|
79
|
-
var grayColor = "hsl(".concat(h, ", ").concat(s, "%, ").concat(l, "%)");
|
|
80
|
-
var saturationColor = "hsl(".concat(h, ", ", 12, "%, ", 39, "%)");
|
|
81
|
-
var numberOfPageColor = "hsl(".concat(h, ", ", 13, "%, ", 82, "%)");
|
|
82
|
-
return {
|
|
83
|
-
grayColor: grayColor,
|
|
84
|
-
saturationColor: saturationColor,
|
|
85
|
-
numberOfPageColor: numberOfPageColor,
|
|
86
|
-
themeColor: themeColor
|
|
87
|
-
};
|
|
88
|
-
}, [color, theme]),
|
|
89
|
-
grayColor = _useMemo.grayColor,
|
|
90
|
-
numberOfPageColor = _useMemo.numberOfPageColor,
|
|
91
|
-
saturationColor = _useMemo.saturationColor,
|
|
92
|
-
themeColor = _useMemo.themeColor;
|
|
93
|
-
function handleClick(event) {
|
|
94
|
-
setActivePage(Number(event.currentTarget.innerHTML));
|
|
95
|
-
if (Number.isInteger(Number(event.currentTarget.innerHTML))) {
|
|
96
|
-
onChange === null || onChange === void 0 ? void 0 : onChange(Number(event.currentTarget.innerHTML));
|
|
97
|
-
}
|
|
98
|
-
}
|
|
99
|
-
function handlePreviousNavigate() {
|
|
100
|
-
setActivePage(function (v) {
|
|
101
|
-
return v === 1 ? v : v - 1;
|
|
102
|
-
});
|
|
103
|
-
}
|
|
104
|
-
function handleNextNavigate() {
|
|
105
|
-
setActivePage(function (v) {
|
|
106
|
-
return v === count ? v : v + 1;
|
|
107
|
-
});
|
|
108
|
-
}
|
|
109
|
-
function LargeView() {
|
|
110
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {
|
|
111
|
-
children: pagination === null || pagination === void 0 ? void 0 : pagination.map(function (number, index) {
|
|
112
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.LargeViewWrap, {
|
|
113
|
-
children: number === _usePagination.DOTS ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.PageWrap, {
|
|
114
|
-
variant: variant,
|
|
115
|
-
shape: shape,
|
|
116
|
-
grayColor: grayColor,
|
|
117
|
-
numberOfPageColor: numberOfPageColor,
|
|
118
|
-
children: number
|
|
119
|
-
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.PaginationItem, {
|
|
120
|
-
shape: shape,
|
|
121
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.PaginationButton, {
|
|
122
|
-
role: "button",
|
|
123
|
-
shape: shape,
|
|
124
|
-
numberOfPageColor: numberOfPageColor,
|
|
125
|
-
variant: variant,
|
|
126
|
-
color: color || themeColor,
|
|
127
|
-
grayColor: grayColor,
|
|
128
|
-
onClick: handleClick,
|
|
129
|
-
isActivePage: activePage === number,
|
|
130
|
-
disabled: isDisabled,
|
|
131
|
-
children: number
|
|
132
|
-
})
|
|
133
|
-
}, "pagination-small-list-".concat(number))
|
|
134
|
-
}, "pagination-large-list-".concat(index));
|
|
135
|
-
})
|
|
136
|
-
});
|
|
137
|
-
}
|
|
138
|
-
function SmallView() {
|
|
139
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.SmallPageInfo, {
|
|
140
|
-
saturationColor: saturationColor,
|
|
141
|
-
children: [activePage, " de ", count]
|
|
142
|
-
}, "pagination-small-list-".concat(activePage));
|
|
143
|
-
}
|
|
144
|
-
if (!count) return null;
|
|
145
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.PaginationList, {
|
|
146
|
-
shape: shape,
|
|
147
|
-
size: size,
|
|
148
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.PreviousNavigationButton, {
|
|
149
|
-
role: "button",
|
|
150
|
-
shape: shape,
|
|
151
|
-
saturationColor: saturationColor,
|
|
152
|
-
onClick: handlePreviousNavigate,
|
|
153
|
-
color: color || themeColor,
|
|
154
|
-
grayColor: grayColor,
|
|
155
|
-
disabled: previousButtonDisabled || isDisabled,
|
|
156
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
|
|
157
|
-
name: previousButtonIcon,
|
|
158
|
-
size: 22
|
|
159
|
-
})
|
|
160
|
-
}), size === 'large' && /*#__PURE__*/(0, _jsxRuntime.jsx)(LargeView, {}), size === 'small' && /*#__PURE__*/(0, _jsxRuntime.jsx)(SmallView, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.NextNavigationButton, {
|
|
161
|
-
role: "button",
|
|
162
|
-
shape: shape,
|
|
163
|
-
grayColor: grayColor,
|
|
164
|
-
saturationColor: saturationColor,
|
|
165
|
-
onClick: handleNextNavigate,
|
|
166
|
-
color: color || themeColor,
|
|
167
|
-
disabled: nextButtonDisabled || isDisabled,
|
|
168
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
|
|
169
|
-
name: nextButtonIcon,
|
|
170
|
-
size: 22
|
|
171
|
-
})
|
|
172
|
-
})]
|
|
173
|
-
}, "pagination-list-".concat(activePage));
|
|
174
|
-
}
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.Pagination=Pagination;var _react=require("react"),_Icon=_interopRequireDefault(require("../Icon")),_colorToGray=require("../../utils/colorToGray"),_usePagination=require("./hooks/usePagination"),_styles=require("./styles"),_theme=require("../../shared/theme"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}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 Pagination(_ref){function handleClick(event){setActivePage(+event.currentTarget.innerHTML),Number.isInteger(+event.currentTarget.innerHTML)&&(null===onChange||void 0===onChange?void 0:onChange(+event.currentTarget.innerHTML))}var count=_ref.count,onChange=_ref.onChange,_ref$previousButtonIc=_ref.previousButtonIcon,previousButtonIcon=void 0===_ref$previousButtonIc?"chevron-left":_ref$previousButtonIc,_ref$nextButtonIcon=_ref.nextButtonIcon,nextButtonIcon=void 0===_ref$nextButtonIcon?"chevron-right":_ref$nextButtonIcon,isDisabled=_ref.isDisabled,defaultPage=_ref.defaultPage,_ref$size=_ref.size,size=void 0===_ref$size?"large":_ref$size,_ref$shape=_ref.shape,shape=void 0===_ref$shape?"rounded":_ref$shape,_ref$variant=_ref.variant,variant=void 0===_ref$variant?"outlined":_ref$variant,color=_ref.color,_useState=(0,_react.useState)(defaultPage||1),_useState2=_slicedToArray(_useState,2),activePage=_useState2[0],setActivePage=_useState2[1],pagination=(0,_usePagination.usePagination)({activePage:activePage,count:count}),_useState3=(0,_react.useState)(!1),_useState4=_slicedToArray(_useState3,2),previousButtonDisabled=_useState4[0],setPreviousButtonDisabled=_useState4[1],_useState5=(0,_react.useState)(!1),_useState6=_slicedToArray(_useState5,2),nextButtonDisabled=_useState6[0],setNextButtonDisabled=_useState6[1],_useTheme=(0,_theme.useTheme)(),theme=_useTheme.theme;(0,_react.useEffect)(function(){activePage===count?setNextButtonDisabled(!0):setNextButtonDisabled(!1),1===activePage?setPreviousButtonDisabled(!0):setPreviousButtonDisabled(!1)},[activePage,count]),(0,_react.useEffect)(function(){null===onChange||void 0===onChange?void 0:onChange(activePage)},[activePage]);var _useMemo=(0,_react.useMemo)(function(){var themeColor=theme.colors.primary.default,_convertColor=(0,_colorToGray.convertColor)(color||themeColor),neutral2=_convertColor.neutral2,_grayColorByTheme=_slicedToArray(neutral2,3),h=_grayColorByTheme[0],s=_grayColorByTheme[1],l=_grayColorByTheme[2],grayColor="hsl(".concat(h,", ").concat(s,"%, ").concat(l,"%)"),saturationColor="hsl(".concat(h,", ",12,"%, ",39,"%)"),numberOfPageColor="hsl(".concat(h,", ",13,"%, ",82,"%)");return{grayColor:grayColor,saturationColor:saturationColor,numberOfPageColor:numberOfPageColor,themeColor:themeColor}},[color,theme]),grayColor=_useMemo.grayColor,numberOfPageColor=_useMemo.numberOfPageColor,saturationColor=_useMemo.saturationColor,themeColor=_useMemo.themeColor;return count?/*#__PURE__*/(0,_jsxRuntime.jsxs)(_styles.PaginationList,{shape:shape,size:size,children:[/*#__PURE__*/(0,_jsxRuntime.jsx)(_styles.PreviousNavigationButton,{role:"button",shape:shape,saturationColor:saturationColor,onClick:function(){setActivePage(function(v){return 1===v?v:v-1})},color:color||themeColor,grayColor:grayColor,disabled:previousButtonDisabled||isDisabled,children:/*#__PURE__*/(0,_jsxRuntime.jsx)(_Icon.default,{name:previousButtonIcon,size:22})}),"large"===size&&/*#__PURE__*/(0,_jsxRuntime.jsx)(function(){return/*#__PURE__*/(0,_jsxRuntime.jsx)(_react.Fragment,{children:null===pagination||void 0===pagination?void 0:pagination.map(function(number,index){return/*#__PURE__*/(0,_jsxRuntime.jsx)(_styles.LargeViewWrap,{children:number===_usePagination.DOTS?/*#__PURE__*/(0,_jsxRuntime.jsx)(_styles.PageWrap,{variant:variant,shape:shape,grayColor:grayColor,numberOfPageColor:numberOfPageColor,children:number}):/*#__PURE__*/(0,_jsxRuntime.jsx)(_styles.PaginationItem,{shape:shape,children:/*#__PURE__*/(0,_jsxRuntime.jsx)(_styles.PaginationButton,{role:"button",shape:shape,numberOfPageColor:numberOfPageColor,variant:variant,color:color||themeColor,grayColor:grayColor,onClick:handleClick,isActivePage:activePage===number,disabled:isDisabled,children:number})},"pagination-small-list-".concat(number))},"pagination-large-list-".concat(index))})})},{}),"small"===size&&/*#__PURE__*/(0,_jsxRuntime.jsx)(function(){return/*#__PURE__*/(0,_jsxRuntime.jsxs)(_styles.SmallPageInfo,{saturationColor:saturationColor,children:[activePage," de ",count]},"pagination-small-list-".concat(activePage))},{}),/*#__PURE__*/(0,_jsxRuntime.jsx)(_styles.NextNavigationButton,{role:"button",shape:shape,grayColor:grayColor,saturationColor:saturationColor,onClick:function(){setActivePage(function(v){return v===count?v:v+1})},color:color||themeColor,disabled:nextButtonDisabled||isDisabled,children:/*#__PURE__*/(0,_jsxRuntime.jsx)(_Icon.default,{name:nextButtonIcon,size:22})})]},"pagination-list-".concat(activePage)):null}
|
|
@@ -1,118 +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 _ = require(".");
|
|
7
|
-
var _jsxRuntime = require("react/jsx-runtime");
|
|
8
|
-
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
9
|
-
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."); }
|
|
10
|
-
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); }
|
|
11
|
-
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; }
|
|
12
|
-
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; } }
|
|
13
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
14
|
-
describe('Pagination', function () {
|
|
15
|
-
it('Should render pagination', function () {
|
|
16
|
-
var numberOfPages = 10;
|
|
17
|
-
(0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Pagination, {
|
|
18
|
-
count: numberOfPages
|
|
19
|
-
}));
|
|
20
|
-
expect(_react.screen.getByText('10')).toBeInTheDocument();
|
|
21
|
-
});
|
|
22
|
-
it('Should call change function', function () {
|
|
23
|
-
var fn = jest.fn();
|
|
24
|
-
var numberOfPages = 10;
|
|
25
|
-
(0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Pagination, {
|
|
26
|
-
count: numberOfPages,
|
|
27
|
-
onChange: fn
|
|
28
|
-
}));
|
|
29
|
-
_react.fireEvent.click(_react.screen.getByText('2'));
|
|
30
|
-
expect(fn).toBeCalled();
|
|
31
|
-
});
|
|
32
|
-
it('Should disable previous button when current page to be 1', function () {
|
|
33
|
-
var numberOfPages = 10;
|
|
34
|
-
(0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Pagination, {
|
|
35
|
-
count: numberOfPages
|
|
36
|
-
}));
|
|
37
|
-
var _screen$getAllByRole = _react.screen.getAllByRole('button'),
|
|
38
|
-
_screen$getAllByRole2 = _slicedToArray(_screen$getAllByRole, 1),
|
|
39
|
-
previousButton = _screen$getAllByRole2[0];
|
|
40
|
-
expect(previousButton).toBeDisabled();
|
|
41
|
-
});
|
|
42
|
-
it('Should disable next button when current page to be last page', function () {
|
|
43
|
-
var numberOfPages = 10;
|
|
44
|
-
var container = (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Pagination, {
|
|
45
|
-
count: numberOfPages
|
|
46
|
-
}));
|
|
47
|
-
_react.fireEvent.click(container.getByText('10'));
|
|
48
|
-
var buttons = container.getAllByRole('button');
|
|
49
|
-
var nextButton = buttons[buttons.length - 1];
|
|
50
|
-
expect(nextButton.getAttribute('disabled')).toEqual('');
|
|
51
|
-
});
|
|
52
|
-
it('Should change current page on Click', function () {
|
|
53
|
-
var numberOfPages = 10;
|
|
54
|
-
(0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Pagination, {
|
|
55
|
-
count: numberOfPages
|
|
56
|
-
}));
|
|
57
|
-
var pageButton = _react.screen.getByText('1');
|
|
58
|
-
_react.fireEvent.click(pageButton);
|
|
59
|
-
expect(window.getComputedStyle(pageButton).backgroundColor).toBe('rgb(34, 224, 161)');
|
|
60
|
-
});
|
|
61
|
-
it('Should set hightlight color if color prop is provided', function () {
|
|
62
|
-
var numberOfPages = 10;
|
|
63
|
-
(0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Pagination, {
|
|
64
|
-
count: numberOfPages,
|
|
65
|
-
color: "#f6ca3f"
|
|
66
|
-
}));
|
|
67
|
-
var pageButton = _react.screen.getByText('1');
|
|
68
|
-
expect(window.getComputedStyle(pageButton).backgroundColor).toBe('rgb(246, 202, 63)');
|
|
69
|
-
});
|
|
70
|
-
it('Should set circular button if shape circular is provided', function () {
|
|
71
|
-
var numberOfPages = 10;
|
|
72
|
-
(0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Pagination, {
|
|
73
|
-
count: numberOfPages,
|
|
74
|
-
shape: "circular"
|
|
75
|
-
}));
|
|
76
|
-
var _screen$getAllByRole3 = _react.screen.getAllByRole('button'),
|
|
77
|
-
_screen$getAllByRole4 = _slicedToArray(_screen$getAllByRole3, 1),
|
|
78
|
-
navigationButton = _screen$getAllByRole4[0];
|
|
79
|
-
expect(window.getComputedStyle(navigationButton).borderRadius).toBe('50%');
|
|
80
|
-
});
|
|
81
|
-
it('Should set roundend button if shape rounded is provided', function () {
|
|
82
|
-
var numberOfPages = 10;
|
|
83
|
-
(0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Pagination, {
|
|
84
|
-
count: numberOfPages,
|
|
85
|
-
shape: "rounded"
|
|
86
|
-
}));
|
|
87
|
-
var _screen$getAllByRole5 = _react.screen.getAllByRole('button'),
|
|
88
|
-
_screen$getAllByRole6 = _slicedToArray(_screen$getAllByRole5, 1),
|
|
89
|
-
navigationButton = _screen$getAllByRole6[0];
|
|
90
|
-
expect(window.getComputedStyle(navigationButton).borderRadius).toBe('8px 0 0 8px');
|
|
91
|
-
});
|
|
92
|
-
it('Should render small pagination if size small is provided', function () {
|
|
93
|
-
var numberOfPages = 10;
|
|
94
|
-
(0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Pagination, {
|
|
95
|
-
count: numberOfPages,
|
|
96
|
-
size: "small"
|
|
97
|
-
}));
|
|
98
|
-
expect(_react.screen.getAllByRole('button').length).toBe(2);
|
|
99
|
-
});
|
|
100
|
-
it('Should render default selected page if defaultPage is provided', function () {
|
|
101
|
-
var numberOfPages = 10;
|
|
102
|
-
(0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Pagination, {
|
|
103
|
-
count: numberOfPages,
|
|
104
|
-
defaultPage: 5
|
|
105
|
-
}));
|
|
106
|
-
var pageButton = _react.screen.getByText('5');
|
|
107
|
-
expect(window.getComputedStyle(pageButton).backgroundColor).toBe('rgb(34, 224, 161)');
|
|
108
|
-
});
|
|
109
|
-
it('Should disabled if isDisabledProp is provided', function () {
|
|
110
|
-
var numberOfPages = 10;
|
|
111
|
-
var container = (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Pagination, {
|
|
112
|
-
count: numberOfPages,
|
|
113
|
-
isDisabled: true
|
|
114
|
-
}));
|
|
115
|
-
var pageButton = container.getByText('10');
|
|
116
|
-
expect(pageButton).toBeDisabled();
|
|
117
|
-
});
|
|
118
|
-
});
|
|
1
|
+
"use strict";var _testUtils=require("../../shared/tests/test-utils"),_react=require("@testing-library/react");require("@testing-library/jest-dom");var _=require("."),_jsxRuntime=require("react/jsx-runtime");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}describe("Pagination",function(){it("Should render pagination",function(){(0,_testUtils.render)(/*#__PURE__*/(0,_jsxRuntime.jsx)(_.Pagination,{count:10})),expect(_react.screen.getByText("10")).toBeInTheDocument()}),it("Should call change function",function(){var fn=jest.fn();(0,_testUtils.render)(/*#__PURE__*/(0,_jsxRuntime.jsx)(_.Pagination,{count:10,onChange:fn})),_react.fireEvent.click(_react.screen.getByText("2")),expect(fn).toBeCalled()}),it("Should disable previous button when current page to be 1",function(){(0,_testUtils.render)(/*#__PURE__*/(0,_jsxRuntime.jsx)(_.Pagination,{count:10}));var _screen$getAllByRole=_react.screen.getAllByRole("button"),_screen$getAllByRole2=_slicedToArray(_screen$getAllByRole,1),previousButton=_screen$getAllByRole2[0];expect(previousButton).toBeDisabled()}),it("Should disable next button when current page to be last page",function(){var container=(0,_testUtils.render)(/*#__PURE__*/(0,_jsxRuntime.jsx)(_.Pagination,{count:10}));_react.fireEvent.click(container.getByText("10"));var buttons=container.getAllByRole("button"),nextButton=buttons[buttons.length-1];expect(nextButton.getAttribute("disabled")).toEqual("")}),it("Should change current page on Click",function(){(0,_testUtils.render)(/*#__PURE__*/(0,_jsxRuntime.jsx)(_.Pagination,{count:10}));var pageButton=_react.screen.getByText("1");_react.fireEvent.click(pageButton),expect(window.getComputedStyle(pageButton).backgroundColor).toBe("rgb(34, 224, 161)")}),it("Should set hightlight color if color prop is provided",function(){(0,_testUtils.render)(/*#__PURE__*/(0,_jsxRuntime.jsx)(_.Pagination,{count:10,color:"#f6ca3f"}));var pageButton=_react.screen.getByText("1");expect(window.getComputedStyle(pageButton).backgroundColor).toBe("rgb(246, 202, 63)")}),it("Should set circular button if shape circular is provided",function(){(0,_testUtils.render)(/*#__PURE__*/(0,_jsxRuntime.jsx)(_.Pagination,{count:10,shape:"circular"}));var _screen$getAllByRole3=_react.screen.getAllByRole("button"),_screen$getAllByRole4=_slicedToArray(_screen$getAllByRole3,1),navigationButton=_screen$getAllByRole4[0];expect(window.getComputedStyle(navigationButton).borderRadius).toBe("50%")}),it("Should set roundend button if shape rounded is provided",function(){(0,_testUtils.render)(/*#__PURE__*/(0,_jsxRuntime.jsx)(_.Pagination,{count:10,shape:"rounded"}));var _screen$getAllByRole5=_react.screen.getAllByRole("button"),_screen$getAllByRole6=_slicedToArray(_screen$getAllByRole5,1),navigationButton=_screen$getAllByRole6[0];expect(window.getComputedStyle(navigationButton).borderRadius).toBe("8px 0 0 8px")}),it("Should render small pagination if size small is provided",function(){(0,_testUtils.render)(/*#__PURE__*/(0,_jsxRuntime.jsx)(_.Pagination,{count:10,size:"small"})),expect(_react.screen.getAllByRole("button").length).toBe(2)}),it("Should render default selected page if defaultPage is provided",function(){(0,_testUtils.render)(/*#__PURE__*/(0,_jsxRuntime.jsx)(_.Pagination,{count:10,defaultPage:5}));var pageButton=_react.screen.getByText("5");expect(window.getComputedStyle(pageButton).backgroundColor).toBe("rgb(34, 224, 161)")}),it("Should disabled if isDisabledProp is provided",function(){var container=(0,_testUtils.render)(/*#__PURE__*/(0,_jsxRuntime.jsx)(_.Pagination,{count:10,isDisabled:!0})),pageButton=container.getByText("10");expect(pageButton).toBeDisabled()})});
|