decathlon-ui 0.2.2 → 0.2.4
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/accordion/accordion.component.d.ts +1 -1
- package/dist/components/accordion/accordion.component.d.ts.map +1 -1
- package/dist/components/accordion/accordion.component.js +5 -15
- package/dist/components/action-button/action-button.component.d.ts +1 -1
- package/dist/components/action-button/action-button.component.d.ts.map +1 -1
- package/dist/components/action-button/action-button.component.js +7 -8
- package/dist/components/badge/badge.component.d.ts +2 -5
- package/dist/components/badge/badge.component.d.ts.map +1 -1
- package/dist/components/badge/badge.component.js +4 -1
- package/dist/components/badge/index.d.ts +1 -1
- package/dist/components/badge/index.d.ts.map +1 -1
- package/dist/components/banner-carousel/banner-carousel.component.d.ts +5 -0
- package/dist/components/banner-carousel/banner-carousel.component.d.ts.map +1 -0
- package/dist/components/banner-carousel/banner-carousel.component.js +68 -0
- package/dist/components/banner-carousel/banner-carousel.styles.d.ts +17 -0
- package/dist/components/banner-carousel/banner-carousel.styles.d.ts.map +1 -0
- package/dist/components/banner-carousel/banner-carousel.styles.js +20 -0
- package/dist/components/banner-carousel/banner-carousel.types.d.ts +11 -0
- package/dist/components/banner-carousel/banner-carousel.types.d.ts.map +1 -0
- package/dist/components/banner-carousel/banner-carousel.types.js +1 -0
- package/dist/components/banner-carousel/index.d.ts +3 -0
- package/dist/components/banner-carousel/index.d.ts.map +1 -0
- package/dist/components/banner-carousel/index.js +1 -0
- package/dist/components/button/button.component.d.ts +1 -1
- package/dist/components/button/button.component.d.ts.map +1 -1
- package/dist/components/button/button.component.js +7 -3
- package/dist/components/card/card.component.d.ts +1 -1
- package/dist/components/card/card.component.d.ts.map +1 -1
- package/dist/components/card/card.component.js +4 -1
- package/dist/components/cashback-banner/cashback-banner.component.d.ts +1 -1
- package/dist/components/cashback-banner/cashback-banner.component.d.ts.map +1 -1
- package/dist/components/cashback-banner/cashback-banner.component.js +4 -1
- package/dist/components/category-item/category-item.component.d.ts +1 -4
- package/dist/components/category-item/category-item.component.d.ts.map +1 -1
- package/dist/components/category-item/category-item.component.js +9 -7
- package/dist/components/category-item/category-item.styles.d.ts +2 -2
- package/dist/components/category-item/category-item.styles.js +2 -2
- package/dist/components/category-item/category-item.types.d.ts +2 -2
- package/dist/components/category-item/category-item.types.d.ts.map +1 -1
- package/dist/components/checkbox/checkbox.component.d.ts +1 -1
- package/dist/components/checkbox/checkbox.component.d.ts.map +1 -1
- package/dist/components/checkbox/checkbox.component.js +3 -1
- package/dist/components/event-card/event-card.component.d.ts +4 -0
- package/dist/components/event-card/event-card.component.d.ts.map +1 -0
- package/dist/components/event-card/event-card.component.js +23 -0
- package/dist/components/event-card/event-card.styles.d.ts +15 -0
- package/dist/components/event-card/event-card.styles.d.ts.map +1 -0
- package/dist/components/event-card/event-card.styles.js +62 -0
- package/dist/components/event-card/event-card.types.d.ts +25 -0
- package/dist/components/event-card/event-card.types.d.ts.map +1 -0
- package/dist/components/event-card/event-card.types.js +1 -0
- package/dist/components/event-card/index.d.ts +3 -0
- package/dist/components/event-card/index.d.ts.map +1 -0
- package/dist/components/event-card/index.js +1 -0
- package/dist/components/filter-chip/filter-chip.component.d.ts +1 -4
- package/dist/components/filter-chip/filter-chip.component.d.ts.map +1 -1
- package/dist/components/filter-chip/filter-chip.component.js +4 -1
- package/dist/components/image-gallery/image-gallery.component.d.ts +3 -0
- package/dist/components/image-gallery/image-gallery.component.d.ts.map +1 -0
- package/dist/components/image-gallery/image-gallery.component.js +50 -0
- package/dist/components/image-gallery/image-gallery.styles.d.ts +58 -0
- package/dist/components/image-gallery/image-gallery.styles.d.ts.map +1 -0
- package/dist/components/image-gallery/image-gallery.styles.js +62 -0
- package/dist/components/image-gallery/image-gallery.types.d.ts +11 -0
- package/dist/components/image-gallery/image-gallery.types.d.ts.map +1 -0
- package/dist/components/image-gallery/image-gallery.types.js +1 -0
- package/dist/components/image-gallery/index.d.ts +2 -0
- package/dist/components/image-gallery/index.d.ts.map +1 -0
- package/dist/components/image-gallery/index.js +1 -0
- package/dist/components/image-viewing/components/image-default-header.d.ts +13 -0
- package/dist/components/image-viewing/components/image-default-header.d.ts.map +1 -0
- package/dist/components/image-viewing/components/image-default-header.js +27 -0
- package/dist/components/image-viewing/components/image-item/image-item.component.android.d.ts +14 -0
- package/dist/components/image-viewing/components/image-item/image-item.component.android.d.ts.map +1 -0
- package/dist/components/image-viewing/components/image-item/image-item.component.android.js +74 -0
- package/dist/components/image-viewing/components/image-item/image-item.component.d.ts +11 -0
- package/dist/components/image-viewing/components/image-item/image-item.component.d.ts.map +1 -0
- package/dist/components/image-viewing/components/image-item/image-item.component.ios.d.ts +14 -0
- package/dist/components/image-viewing/components/image-item/image-item.component.ios.d.ts.map +1 -0
- package/dist/components/image-viewing/components/image-item/image-item.component.ios.js +66 -0
- package/dist/components/image-viewing/components/image-item/image-item.component.js +5 -0
- package/dist/components/image-viewing/components/image-item/image-item.constants.d.ts +4 -0
- package/dist/components/image-viewing/components/image-item/image-item.constants.d.ts.map +1 -0
- package/dist/components/image-viewing/components/image-item/image-item.constants.js +5 -0
- package/dist/components/image-viewing/components/image-item/image-loading.component.d.ts +2 -0
- package/dist/components/image-viewing/components/image-item/image-loading.component.d.ts.map +1 -0
- package/dist/components/image-viewing/components/image-item/image-loading.component.js +14 -0
- package/dist/components/image-viewing/components/status-bar-manager.d.ts +6 -0
- package/dist/components/image-viewing/components/status-bar-manager.d.ts.map +1 -0
- package/dist/components/image-viewing/components/status-bar-manager.js +14 -0
- package/dist/components/image-viewing/hooks/index.d.ts +8 -0
- package/dist/components/image-viewing/hooks/index.d.ts.map +1 -0
- package/dist/components/image-viewing/hooks/index.js +7 -0
- package/dist/components/image-viewing/hooks/useAnimatedComponents.d.ts +19 -0
- package/dist/components/image-viewing/hooks/useAnimatedComponents.d.ts.map +1 -0
- package/dist/components/image-viewing/hooks/useAnimatedComponents.js +41 -0
- package/dist/components/image-viewing/hooks/useDoubleTapToZoom.d.ts +17 -0
- package/dist/components/image-viewing/hooks/useDoubleTapToZoom.d.ts.map +1 -0
- package/dist/components/image-viewing/hooks/useDoubleTapToZoom.js +49 -0
- package/dist/components/image-viewing/hooks/useImageDimensions.d.ts +11 -0
- package/dist/components/image-viewing/hooks/useImageDimensions.d.ts.map +1 -0
- package/dist/components/image-viewing/hooks/useImageDimensions.js +64 -0
- package/dist/components/image-viewing/hooks/useImageIndexChange.d.ts +12 -0
- package/dist/components/image-viewing/hooks/useImageIndexChange.d.ts.map +1 -0
- package/dist/components/image-viewing/hooks/useImageIndexChange.js +20 -0
- package/dist/components/image-viewing/hooks/useImagePrefetch.d.ts +11 -0
- package/dist/components/image-viewing/hooks/useImagePrefetch.d.ts.map +1 -0
- package/dist/components/image-viewing/hooks/useImagePrefetch.js +21 -0
- package/dist/components/image-viewing/hooks/usePanResponder.d.ts +20 -0
- package/dist/components/image-viewing/hooks/usePanResponder.d.ts.map +1 -0
- package/dist/components/image-viewing/hooks/usePanResponder.js +273 -0
- package/dist/components/image-viewing/hooks/useRequestClose.d.ts +10 -0
- package/dist/components/image-viewing/hooks/useRequestClose.d.ts.map +1 -0
- package/dist/components/image-viewing/hooks/useRequestClose.js +20 -0
- package/dist/components/image-viewing/image-viewing.component.d.ts +34 -0
- package/dist/components/image-viewing/image-viewing.component.d.ts.map +1 -0
- package/dist/components/image-viewing/image-viewing.component.js +74 -0
- package/dist/components/image-viewing/image-viewing.types.d.ts +11 -0
- package/dist/components/image-viewing/image-viewing.types.d.ts.map +1 -0
- package/dist/components/image-viewing/image-viewing.types.js +1 -0
- package/dist/components/image-viewing/util.d.ts +47 -0
- package/dist/components/image-viewing/util.d.ts.map +1 -0
- package/dist/components/image-viewing/util.js +99 -0
- package/dist/components/index.d.ts +3 -0
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +3 -0
- package/dist/components/input/input.component.d.ts +1 -1
- package/dist/components/input/input.component.d.ts.map +1 -1
- package/dist/components/input/input.component.js +3 -1
- package/dist/components/loading/loading.component.d.ts +1 -1
- package/dist/components/loading/loading.component.d.ts.map +1 -1
- package/dist/components/loading/loading.component.js +8 -4
- package/dist/components/order-card/order-card.component.d.ts +1 -1
- package/dist/components/order-card/order-card.component.d.ts.map +1 -1
- package/dist/components/order-card/order-card.component.js +4 -1
- package/dist/components/product-card/product-card.component.d.ts +1 -1
- package/dist/components/product-card/product-card.component.d.ts.map +1 -1
- package/dist/components/product-card/product-card.component.js +3 -1
- package/dist/components/product-card/product-card.types.d.ts +1 -1
- package/dist/components/product-card/product-card.types.d.ts.map +1 -1
- package/dist/components/product-highlight/product-highlight.component.d.ts +2 -2
- package/dist/components/product-highlight/product-highlight.component.d.ts.map +1 -1
- package/dist/components/product-highlight/product-highlight.component.js +7 -2
- package/dist/components/product-highlight/product-highlight.d.ts +1 -1
- package/dist/components/product-list-item/product-list-item.component.d.ts +1 -1
- package/dist/components/product-list-item/product-list-item.component.d.ts.map +1 -1
- package/dist/components/product-list-item/product-list-item.component.js +6 -3
- package/dist/components/product-review/product-review.component.d.ts +1 -1
- package/dist/components/product-review/product-review.component.d.ts.map +1 -1
- package/dist/components/product-review/product-review.component.js +6 -3
- package/dist/components/quick-add-product-card/quick-add-product-card.component.d.ts +1 -1
- package/dist/components/quick-add-product-card/quick-add-product-card.component.d.ts.map +1 -1
- package/dist/components/quick-add-product-card/quick-add-product-card.component.js +3 -1
- package/dist/components/radio/radio.component.d.ts +1 -1
- package/dist/components/radio/radio.component.d.ts.map +1 -1
- package/dist/components/radio/radio.component.js +3 -1
- package/dist/components/range-slider/range-slider.component.d.ts +1 -1
- package/dist/components/range-slider/range-slider.component.d.ts.map +1 -1
- package/dist/components/range-slider/range-slider.component.js +3 -1
- package/dist/components/search-button/search-button.component.d.ts +1 -1
- package/dist/components/search-button/search-button.component.d.ts.map +1 -1
- package/dist/components/search-button/search-button.component.js +4 -1
- package/dist/components/seller-box/seller-box.component.d.ts +1 -1
- package/dist/components/seller-box/seller-box.component.d.ts.map +1 -1
- package/dist/components/seller-box/seller-box.component.js +4 -1
- package/dist/components/toggle-switch/toggle-switch.component.d.ts +1 -1
- package/dist/components/toggle-switch/toggle-switch.component.d.ts.map +1 -1
- package/dist/components/toggle-switch/toggle-switch.component.js +3 -1
- package/dist/components/typography/typography.component.d.ts +1 -1
- package/dist/components/typography/typography.component.d.ts.map +1 -1
- package/dist/components/typography/typography.component.js +4 -1
- package/package.json +3 -1
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) JOB TODAY S.A. and its affiliates.
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the MIT license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*
|
|
7
|
+
*/
|
|
8
|
+
declare const useRequestClose: (onRequestClose: () => void) => readonly [number, () => void];
|
|
9
|
+
export default useRequestClose;
|
|
10
|
+
//# sourceMappingURL=useRequestClose.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useRequestClose.d.ts","sourceRoot":"","sources":["../../../../src/components/image-viewing/hooks/useRequestClose.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH,QAAA,MAAM,eAAe,GAAI,gBAAgB,MAAM,IAAI,kCAWlD,CAAC;AAEF,eAAe,eAAe,CAAC"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) JOB TODAY S.A. and its affiliates.
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the MIT license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*
|
|
7
|
+
*/
|
|
8
|
+
import { useState } from "react";
|
|
9
|
+
const useRequestClose = (onRequestClose) => {
|
|
10
|
+
const [opacity, setOpacity] = useState(1);
|
|
11
|
+
return [
|
|
12
|
+
opacity,
|
|
13
|
+
() => {
|
|
14
|
+
setOpacity(0);
|
|
15
|
+
onRequestClose();
|
|
16
|
+
setTimeout(() => setOpacity(1), 0);
|
|
17
|
+
},
|
|
18
|
+
];
|
|
19
|
+
};
|
|
20
|
+
export default useRequestClose;
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) JOB TODAY S.A. and its affiliates.
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the MIT license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*
|
|
7
|
+
*/
|
|
8
|
+
import { ComponentType } from "react";
|
|
9
|
+
import { ModalProps } from "react-native";
|
|
10
|
+
import { ImageSource } from "./image-viewing.types";
|
|
11
|
+
type Props = {
|
|
12
|
+
images: ImageSource[];
|
|
13
|
+
keyExtractor?: (imageSrc: ImageSource, index: number) => string;
|
|
14
|
+
imageIndex: number;
|
|
15
|
+
visible: boolean;
|
|
16
|
+
onRequestClose: () => void;
|
|
17
|
+
onLongPress?: (image: ImageSource) => void;
|
|
18
|
+
onImageIndexChange?: (imageIndex: number) => void;
|
|
19
|
+
presentationStyle?: ModalProps["presentationStyle"];
|
|
20
|
+
animationType?: ModalProps["animationType"];
|
|
21
|
+
backgroundColor?: string;
|
|
22
|
+
swipeToCloseEnabled?: boolean;
|
|
23
|
+
doubleTapToZoomEnabled?: boolean;
|
|
24
|
+
delayLongPress?: number;
|
|
25
|
+
HeaderComponent?: ComponentType<{
|
|
26
|
+
imageIndex: number;
|
|
27
|
+
}>;
|
|
28
|
+
FooterComponent?: ComponentType<{
|
|
29
|
+
imageIndex: number;
|
|
30
|
+
}>;
|
|
31
|
+
};
|
|
32
|
+
declare const EnhancedImageViewing: (props: Props) => import("react/jsx-runtime").JSX.Element;
|
|
33
|
+
export default EnhancedImageViewing;
|
|
34
|
+
//# sourceMappingURL=image-viewing.component.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"image-viewing.component.d.ts","sourceRoot":"","sources":["../../../src/components/image-viewing/image-viewing.component.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAc,EAAE,aAAa,EAAkC,MAAM,OAAO,CAAC;AAC7E,OAAO,EAIH,UAAU,EAIb,MAAM,cAAc,CAAC;AAOtB,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAGpD,KAAK,KAAK,GAAG;IACT,MAAM,EAAE,WAAW,EAAE,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAChE,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IAC3C,kBAAkB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,iBAAiB,CAAC,EAAE,UAAU,CAAC,mBAAmB,CAAC,CAAC;IACpD,aAAa,CAAC,EAAE,UAAU,CAAC,eAAe,CAAC,CAAC;IAC5C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,aAAa,CAAC;QAAE,UAAU,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACxD,eAAe,CAAC,EAAE,aAAa,CAAC;QAAE,UAAU,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CAC3D,CAAC;AA+IF,QAAA,MAAM,oBAAoB,GAAI,OAAO,KAAK,4CAEzC,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
/**
|
|
3
|
+
* Copyright (c) JOB TODAY S.A. and its affiliates.
|
|
4
|
+
*
|
|
5
|
+
* This source code is licensed under the MIT license found in the
|
|
6
|
+
* LICENSE file in the root directory of this source tree.
|
|
7
|
+
*
|
|
8
|
+
*/
|
|
9
|
+
import React, { useCallback, useEffect, useRef } from "react";
|
|
10
|
+
import { Animated, Dimensions, Modal, StyleSheet, View, VirtualizedList, } from "react-native";
|
|
11
|
+
import ImageDefaultHeader from "./components/image-default-header";
|
|
12
|
+
import ImageItem from "./components/image-item/image-item.component";
|
|
13
|
+
import StatusBarManager from "./components/status-bar-manager";
|
|
14
|
+
import { useAnimatedComponents, useImageIndexChange, useRequestClose } from "./hooks";
|
|
15
|
+
const DEFAULT_ANIMATION_TYPE = "fade";
|
|
16
|
+
const DEFAULT_BG_COLOR = "#000";
|
|
17
|
+
const DEFAULT_DELAY_LONG_PRESS = 800;
|
|
18
|
+
const SCREEN = Dimensions.get("screen");
|
|
19
|
+
const SCREEN_WIDTH = SCREEN.width;
|
|
20
|
+
function ImageViewing({ images, keyExtractor, imageIndex, visible, onRequestClose, onLongPress = () => { }, onImageIndexChange, animationType = DEFAULT_ANIMATION_TYPE, backgroundColor = DEFAULT_BG_COLOR, presentationStyle, swipeToCloseEnabled, doubleTapToZoomEnabled, delayLongPress = DEFAULT_DELAY_LONG_PRESS, HeaderComponent, FooterComponent, }) {
|
|
21
|
+
const imageList = useRef(null);
|
|
22
|
+
const [opacity, onRequestCloseEnhanced] = useRequestClose(onRequestClose);
|
|
23
|
+
const [currentImageIndex, onScroll] = useImageIndexChange(imageIndex, SCREEN);
|
|
24
|
+
const [headerTransform, footerTransform, toggleBarsVisible] = useAnimatedComponents();
|
|
25
|
+
useEffect(() => {
|
|
26
|
+
if (onImageIndexChange) {
|
|
27
|
+
onImageIndexChange(currentImageIndex);
|
|
28
|
+
}
|
|
29
|
+
}, [currentImageIndex]);
|
|
30
|
+
const onZoom = useCallback((isScaled) => {
|
|
31
|
+
var _a;
|
|
32
|
+
// @ts-ignore
|
|
33
|
+
(_a = imageList === null || imageList === void 0 ? void 0 : imageList.current) === null || _a === void 0 ? void 0 : _a.setNativeProps({ scrollEnabled: !isScaled });
|
|
34
|
+
toggleBarsVisible(!isScaled);
|
|
35
|
+
}, [imageList]);
|
|
36
|
+
if (!visible) {
|
|
37
|
+
return null;
|
|
38
|
+
}
|
|
39
|
+
return (_jsxs(Modal, { transparent: presentationStyle === "overFullScreen", visible: visible, presentationStyle: presentationStyle, animationType: animationType, onRequestClose: onRequestCloseEnhanced, supportedOrientations: ["portrait"], hardwareAccelerated: true, children: [_jsx(StatusBarManager, { presentationStyle: presentationStyle }), _jsxs(View, { style: [styles.container, { opacity, backgroundColor }], children: [_jsx(Animated.View, { style: [styles.header, { transform: headerTransform }], children: typeof HeaderComponent !== "undefined" ? (React.createElement(HeaderComponent, {
|
|
40
|
+
imageIndex: currentImageIndex,
|
|
41
|
+
})) : (_jsx(ImageDefaultHeader, { onRequestClose: onRequestCloseEnhanced })) }), _jsx(VirtualizedList, { ref: imageList, data: images, horizontal: true, pagingEnabled: true, windowSize: 2, initialNumToRender: 1, maxToRenderPerBatch: 1, showsHorizontalScrollIndicator: false, showsVerticalScrollIndicator: false, initialScrollIndex: imageIndex, getItem: (_, index) => images[index], getItemCount: () => images.length, getItemLayout: (_, index) => ({
|
|
42
|
+
length: SCREEN_WIDTH,
|
|
43
|
+
offset: SCREEN_WIDTH * index,
|
|
44
|
+
index,
|
|
45
|
+
}), renderItem: ({ item: imageSrc }) => (_jsx(ImageItem, { onZoom: onZoom, imageSrc: imageSrc, onRequestClose: onRequestCloseEnhanced, onLongPress: onLongPress, delayLongPress: delayLongPress, swipeToCloseEnabled: swipeToCloseEnabled, doubleTapToZoomEnabled: doubleTapToZoomEnabled })), onMomentumScrollEnd: onScroll,
|
|
46
|
+
//@ts-ignore
|
|
47
|
+
keyExtractor: (imageSrc, index) => keyExtractor
|
|
48
|
+
? keyExtractor(imageSrc, index)
|
|
49
|
+
: typeof imageSrc === "number"
|
|
50
|
+
? `${imageSrc}`
|
|
51
|
+
: imageSrc.uri }), typeof FooterComponent !== "undefined" && (_jsx(Animated.View, { style: [styles.footer, { transform: footerTransform }], children: React.createElement(FooterComponent, {
|
|
52
|
+
imageIndex: currentImageIndex,
|
|
53
|
+
}) }))] })] }));
|
|
54
|
+
}
|
|
55
|
+
const styles = StyleSheet.create({
|
|
56
|
+
container: {
|
|
57
|
+
flex: 1,
|
|
58
|
+
backgroundColor: "#000",
|
|
59
|
+
},
|
|
60
|
+
header: {
|
|
61
|
+
position: "absolute",
|
|
62
|
+
width: "100%",
|
|
63
|
+
zIndex: 1,
|
|
64
|
+
top: 0,
|
|
65
|
+
},
|
|
66
|
+
footer: {
|
|
67
|
+
position: "absolute",
|
|
68
|
+
width: "100%",
|
|
69
|
+
zIndex: 1,
|
|
70
|
+
bottom: 0,
|
|
71
|
+
},
|
|
72
|
+
});
|
|
73
|
+
const EnhancedImageViewing = (props) => (_jsx(ImageViewing, { ...props }, props.imageIndex));
|
|
74
|
+
export default EnhancedImageViewing;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { ImageRequireSource, ImageURISource } from "react-native";
|
|
2
|
+
export type Dimensions = {
|
|
3
|
+
width: number;
|
|
4
|
+
height: number;
|
|
5
|
+
};
|
|
6
|
+
export type Position = {
|
|
7
|
+
x: number;
|
|
8
|
+
y: number;
|
|
9
|
+
};
|
|
10
|
+
export type ImageSource = ImageURISource | ImageRequireSource;
|
|
11
|
+
//# sourceMappingURL=image-viewing.types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"image-viewing.types.d.ts","sourceRoot":"","sources":["../../../src/components/image-viewing/image-viewing.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAElE,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG;IACrB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,cAAc,GAAG,kBAAkB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) JOB TODAY S.A. and its affiliates.
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the MIT license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*
|
|
7
|
+
*/
|
|
8
|
+
import { Animated, GestureResponderEvent, NativeTouchEvent, PanResponderGestureState, PanResponderInstance } from "react-native";
|
|
9
|
+
import { Dimensions, Position } from "./image-viewing.types";
|
|
10
|
+
type CacheStorageItem = {
|
|
11
|
+
key: string;
|
|
12
|
+
value: any;
|
|
13
|
+
};
|
|
14
|
+
export declare const createCache: (cacheSize: number) => {
|
|
15
|
+
_storage: CacheStorageItem[];
|
|
16
|
+
get(key: string): any;
|
|
17
|
+
set(key: string, value: any): void;
|
|
18
|
+
};
|
|
19
|
+
export declare const splitArrayIntoBatches: (arr: any[], batchSize: number) => any[];
|
|
20
|
+
export declare const getImageTransform: (image: Dimensions | null, screen: Dimensions) => readonly [] | readonly [{
|
|
21
|
+
readonly x: number;
|
|
22
|
+
readonly y: number;
|
|
23
|
+
}, number];
|
|
24
|
+
export declare const getImageStyles: (image: Dimensions | null, translate: Animated.ValueXY, scale?: Animated.Value) => {
|
|
25
|
+
width: number;
|
|
26
|
+
height: number;
|
|
27
|
+
transform?: undefined;
|
|
28
|
+
} | {
|
|
29
|
+
width: number;
|
|
30
|
+
height: number;
|
|
31
|
+
transform: any;
|
|
32
|
+
};
|
|
33
|
+
export declare const getImageTranslate: (image: Dimensions, screen: Dimensions) => Position;
|
|
34
|
+
export declare const getImageDimensionsByTranslate: (translate: Position, screen: Dimensions) => Dimensions;
|
|
35
|
+
export declare const getImageTranslateForScale: (currentTranslate: Position, targetScale: number, screen: Dimensions) => Position;
|
|
36
|
+
type HandlerType = (event: GestureResponderEvent, state: PanResponderGestureState) => void;
|
|
37
|
+
type PanResponderProps = {
|
|
38
|
+
onGrant: HandlerType;
|
|
39
|
+
onStart?: HandlerType;
|
|
40
|
+
onMove: HandlerType;
|
|
41
|
+
onRelease?: HandlerType;
|
|
42
|
+
onTerminate?: HandlerType;
|
|
43
|
+
};
|
|
44
|
+
export declare const createPanResponder: ({ onGrant, onStart, onMove, onRelease, onTerminate, }: PanResponderProps) => PanResponderInstance;
|
|
45
|
+
export declare const getDistanceBetweenTouches: (touches: NativeTouchEvent[]) => number;
|
|
46
|
+
export {};
|
|
47
|
+
//# sourceMappingURL=util.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../../src/components/image-viewing/util.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EACL,QAAQ,EACR,qBAAqB,EACrB,gBAAgB,EAEhB,wBAAwB,EACxB,oBAAoB,EACrB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE7D,KAAK,gBAAgB,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,GAAG,CAAA;CAAE,CAAC;AAEpD,eAAO,MAAM,WAAW,GAAI,WAAW,MAAM;cAC3B,gBAAgB,EAAE;aACzB,MAAM,GAAG,GAAG;aAMZ,MAAM,SAAS,GAAG;CAO3B,CAAC;AAEH,eAAO,MAAM,qBAAqB,GAAI,KAAK,GAAG,EAAE,EAAE,WAAW,MAAM,KAAG,GAAG,EAYjE,CAAC;AAET,eAAO,MAAM,iBAAiB,GAC5B,OAAO,UAAU,GAAG,IAAI,EACxB,QAAQ,UAAU;;;UAYnB,CAAC;AAEF,eAAO,MAAM,cAAc,GACzB,OAAO,UAAU,GAAG,IAAI,EACxB,WAAW,QAAQ,CAAC,OAAO,EAC3B,QAAQ,QAAQ,CAAC,KAAK;;;;;;;;CAiBvB,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAC5B,OAAO,UAAU,EACjB,QAAQ,UAAU,KACjB,QAYF,CAAC;AAEF,eAAO,MAAM,6BAA6B,GACxC,WAAW,QAAQ,EACnB,QAAQ,UAAU,KACjB,UAGD,CAAC;AAEH,eAAO,MAAM,yBAAyB,GACpC,kBAAkB,QAAQ,EAC1B,aAAa,MAAM,EACnB,QAAQ,UAAU,KACjB,QAYF,CAAC;AAEF,KAAK,WAAW,GAAG,CACjB,KAAK,EAAE,qBAAqB,EAC5B,KAAK,EAAE,wBAAwB,KAC5B,IAAI,CAAC;AAEV,KAAK,iBAAiB,GAAG;IACvB,OAAO,EAAE,WAAW,CAAC;IACrB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,MAAM,EAAE,WAAW,CAAC;IACpB,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,uDAMhC,iBAAiB,KAAG,oBAanB,CAAC;AAEL,eAAO,MAAM,yBAAyB,GACpC,SAAS,gBAAgB,EAAE,KAC1B,MAUF,CAAC"}
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) JOB TODAY S.A. and its affiliates.
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the MIT license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*
|
|
7
|
+
*/
|
|
8
|
+
import { Animated, PanResponder, } from "react-native";
|
|
9
|
+
export const createCache = (cacheSize) => ({
|
|
10
|
+
_storage: [],
|
|
11
|
+
get(key) {
|
|
12
|
+
const { value } = this._storage.find(({ key: storageKey }) => storageKey === key) || {};
|
|
13
|
+
return value;
|
|
14
|
+
},
|
|
15
|
+
set(key, value) {
|
|
16
|
+
if (this._storage.length >= cacheSize) {
|
|
17
|
+
this._storage.shift();
|
|
18
|
+
}
|
|
19
|
+
this._storage.push({ key, value });
|
|
20
|
+
},
|
|
21
|
+
});
|
|
22
|
+
export const splitArrayIntoBatches = (arr, batchSize) => arr.reduce((result, item) => {
|
|
23
|
+
const batch = result.pop() || [];
|
|
24
|
+
if (batch.length < batchSize) {
|
|
25
|
+
batch.push(item);
|
|
26
|
+
result.push(batch);
|
|
27
|
+
}
|
|
28
|
+
else {
|
|
29
|
+
result.push(batch, [item]);
|
|
30
|
+
}
|
|
31
|
+
return result;
|
|
32
|
+
}, []);
|
|
33
|
+
export const getImageTransform = (image, screen) => {
|
|
34
|
+
if (!(image === null || image === void 0 ? void 0 : image.width) || !(image === null || image === void 0 ? void 0 : image.height)) {
|
|
35
|
+
return [];
|
|
36
|
+
}
|
|
37
|
+
const wScale = screen.width / image.width;
|
|
38
|
+
const hScale = screen.height / image.height;
|
|
39
|
+
const scale = Math.min(wScale, hScale);
|
|
40
|
+
const { x, y } = getImageTranslate(image, screen);
|
|
41
|
+
return [{ x, y }, scale];
|
|
42
|
+
};
|
|
43
|
+
export const getImageStyles = (image, translate, scale) => {
|
|
44
|
+
if (!(image === null || image === void 0 ? void 0 : image.width) || !(image === null || image === void 0 ? void 0 : image.height)) {
|
|
45
|
+
return { width: 0, height: 0 };
|
|
46
|
+
}
|
|
47
|
+
const transform = translate.getTranslateTransform();
|
|
48
|
+
if (scale) {
|
|
49
|
+
transform.push({ scale }, { perspective: new Animated.Value(1000) });
|
|
50
|
+
}
|
|
51
|
+
return {
|
|
52
|
+
width: image.width,
|
|
53
|
+
height: image.height,
|
|
54
|
+
transform,
|
|
55
|
+
};
|
|
56
|
+
};
|
|
57
|
+
export const getImageTranslate = (image, screen) => {
|
|
58
|
+
const getTranslateForAxis = (axis) => {
|
|
59
|
+
const imageSize = axis === "x" ? image.width : image.height;
|
|
60
|
+
const screenSize = axis === "x" ? screen.width : screen.height;
|
|
61
|
+
return (screenSize - imageSize) / 2;
|
|
62
|
+
};
|
|
63
|
+
return {
|
|
64
|
+
x: getTranslateForAxis("x"),
|
|
65
|
+
y: getTranslateForAxis("y"),
|
|
66
|
+
};
|
|
67
|
+
};
|
|
68
|
+
export const getImageDimensionsByTranslate = (translate, screen) => ({
|
|
69
|
+
width: screen.width - translate.x * 2,
|
|
70
|
+
height: screen.height - translate.y * 2,
|
|
71
|
+
});
|
|
72
|
+
export const getImageTranslateForScale = (currentTranslate, targetScale, screen) => {
|
|
73
|
+
const { width, height } = getImageDimensionsByTranslate(currentTranslate, screen);
|
|
74
|
+
const targetImageDimensions = {
|
|
75
|
+
width: width * targetScale,
|
|
76
|
+
height: height * targetScale,
|
|
77
|
+
};
|
|
78
|
+
return getImageTranslate(targetImageDimensions, screen);
|
|
79
|
+
};
|
|
80
|
+
export const createPanResponder = ({ onGrant, onStart, onMove, onRelease, onTerminate, }) => PanResponder.create({
|
|
81
|
+
onStartShouldSetPanResponder: () => true,
|
|
82
|
+
onStartShouldSetPanResponderCapture: () => true,
|
|
83
|
+
onMoveShouldSetPanResponder: () => true,
|
|
84
|
+
onMoveShouldSetPanResponderCapture: () => true,
|
|
85
|
+
onPanResponderGrant: onGrant,
|
|
86
|
+
onPanResponderStart: onStart,
|
|
87
|
+
onPanResponderMove: onMove,
|
|
88
|
+
onPanResponderRelease: onRelease,
|
|
89
|
+
onPanResponderTerminate: onTerminate,
|
|
90
|
+
onPanResponderTerminationRequest: () => false,
|
|
91
|
+
onShouldBlockNativeResponder: () => false,
|
|
92
|
+
});
|
|
93
|
+
export const getDistanceBetweenTouches = (touches) => {
|
|
94
|
+
const [a, b] = touches;
|
|
95
|
+
if (a == null || b == null) {
|
|
96
|
+
return 0;
|
|
97
|
+
}
|
|
98
|
+
return Math.sqrt(Math.pow(a.pageX - b.pageX, 2) + Math.pow(a.pageY - b.pageY, 2));
|
|
99
|
+
};
|
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
export * from "./accordion/index";
|
|
2
2
|
export * from "./action-button/index";
|
|
3
|
+
export * from "./badge/index";
|
|
4
|
+
export * from "./banner-carousel/index";
|
|
3
5
|
export * from "./button/index";
|
|
4
6
|
export * from "./card/index";
|
|
5
7
|
export * from "./cashback-banner/index";
|
|
6
8
|
export * from "./category-item/index";
|
|
7
9
|
export * from "./checkbox/index";
|
|
10
|
+
export * from "./event-card/index";
|
|
8
11
|
export * from "./filter-chip/index";
|
|
9
12
|
export * from "./input/index";
|
|
10
13
|
export * from "./loading/index";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,eAAe,CAAC;AAC9B,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC;AAC9B,cAAc,yBAAyB,CAAC;AACxC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,eAAe,CAAC;AAC9B,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC"}
|
package/dist/components/index.js
CHANGED
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
export * from "./accordion/index";
|
|
2
2
|
export * from "./action-button/index";
|
|
3
|
+
export * from "./badge/index";
|
|
4
|
+
export * from "./banner-carousel/index";
|
|
3
5
|
export * from "./button/index";
|
|
4
6
|
export * from "./card/index";
|
|
5
7
|
export * from "./cashback-banner/index";
|
|
6
8
|
export * from "./category-item/index";
|
|
7
9
|
export * from "./checkbox/index";
|
|
10
|
+
export * from "./event-card/index";
|
|
8
11
|
export * from "./filter-chip/index";
|
|
9
12
|
export * from "./input/index";
|
|
10
13
|
export * from "./loading/index";
|
|
@@ -13,6 +13,6 @@ interface InputProps {
|
|
|
13
13
|
onChangeText?: (text: string) => void;
|
|
14
14
|
testID?: string;
|
|
15
15
|
}
|
|
16
|
-
export declare const Input: React.
|
|
16
|
+
export declare const Input: React.NamedExoticComponent<InputProps>;
|
|
17
17
|
export {};
|
|
18
18
|
//# sourceMappingURL=input.component.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.component.d.ts","sourceRoot":"","sources":["../../../src/components/input/input.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,KAAK,QAAQ,GAAG,KAAK,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,CAAC;AAE5D,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;
|
|
1
|
+
{"version":3,"file":"input.component.d.ts","sourceRoot":"","sources":["../../../src/components/input/input.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,KAAK,QAAQ,GAAG,KAAK,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,CAAC;AAE5D,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAyKD,eAAO,MAAM,KAAK,wCAA6B,CAAC"}
|
|
@@ -56,7 +56,7 @@ const applyMask = (value, maskType, customMask) => {
|
|
|
56
56
|
return value;
|
|
57
57
|
}
|
|
58
58
|
};
|
|
59
|
-
|
|
59
|
+
const InputComponent = ({ label, placeholder, error, value, disabled = false, maskType, customMask, mask, pattern, onChangeText, testID, }) => {
|
|
60
60
|
const [isFocused, setIsFocused] = React.useState(false);
|
|
61
61
|
const focusAnimation = React.useRef(new Animated.Value(0)).current;
|
|
62
62
|
const styles = useInputStyles();
|
|
@@ -101,3 +101,5 @@ export const Input = ({ label, placeholder, error, value, disabled = false, mask
|
|
|
101
101
|
disabled: disabled,
|
|
102
102
|
}, placeholderTextColor: "#A4ADB7" }), isFocused && _jsx(View, { style: styles.cursor })] }), error && _jsx(ErrorMessage, { message: error })] }));
|
|
103
103
|
};
|
|
104
|
+
export const Input = React.memo(InputComponent);
|
|
105
|
+
Input.displayName = "Input";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { LoadingProps } from './loading.types';
|
|
3
|
-
export declare const Loading: React.
|
|
3
|
+
export declare const Loading: React.NamedExoticComponent<LoadingProps>;
|
|
4
4
|
export default Loading;
|
|
5
5
|
//# sourceMappingURL=loading.component.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"loading.component.d.ts","sourceRoot":"","sources":["../../../src/components/loading/loading.component.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"loading.component.d.ts","sourceRoot":"","sources":["../../../src/components/loading/loading.component.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAuC/C,eAAO,MAAM,OAAO,0CAA+B,CAAC;AAEpD,eAAe,OAAO,CAAC"}
|
|
@@ -1,15 +1,19 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import LottieView from 'lottie-react-native';
|
|
3
|
+
import React from 'react';
|
|
3
4
|
import { View } from 'react-native';
|
|
5
|
+
import LoadingAnimation from '../../assets/animations/loading-animation.json';
|
|
4
6
|
import { useLoadingStyles } from './loading.styles';
|
|
5
|
-
|
|
7
|
+
const LoadingComponent = ({ source, isDotLottie = false, // TODO: trabalhar nisso depois para aceitar dotLottie
|
|
6
8
|
autoPlay = true, loop = true, speed = 1, containerStyle, style, onAnimationFinish, size = 100, }) => {
|
|
7
9
|
const styles = useLoadingStyles();
|
|
8
|
-
const containerStyles = [
|
|
10
|
+
const containerStyles = React.useMemo(() => [
|
|
9
11
|
styles.container,
|
|
10
12
|
{ width: size, height: size },
|
|
11
13
|
containerStyle,
|
|
12
|
-
];
|
|
13
|
-
return (_jsx(View, { style: containerStyles, children: _jsx(LottieView, { source: source ||
|
|
14
|
+
], [size, containerStyle, styles.container]);
|
|
15
|
+
return (_jsx(View, { style: containerStyles, children: _jsx(LottieView, { source: source || LoadingAnimation, style: [styles.animation, style], autoPlay: autoPlay, loop: loop, speed: speed, onAnimationFinish: onAnimationFinish }) }));
|
|
14
16
|
};
|
|
17
|
+
export const Loading = React.memo(LoadingComponent);
|
|
18
|
+
Loading.displayName = "Loading";
|
|
15
19
|
export default Loading;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { OrderCardProps } from "./order-card.types";
|
|
3
|
-
export declare const OrderCard: React.
|
|
3
|
+
export declare const OrderCard: React.NamedExoticComponent<OrderCardProps>;
|
|
4
4
|
//# sourceMappingURL=order-card.component.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"order-card.component.d.ts","sourceRoot":"","sources":["../../../src/components/order-card/order-card.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"order-card.component.d.ts","sourceRoot":"","sources":["../../../src/components/order-card/order-card.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAkIpD,eAAO,MAAM,SAAS,4CAAiC,CAAC"}
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import * as React from "react";
|
|
2
3
|
import { Text, TouchableOpacity, View } from "react-native";
|
|
3
4
|
import { ChevronRightIcon } from "../../icons";
|
|
4
5
|
import { useTheme } from "../../themes";
|
|
5
6
|
import { useOrderCardStyles } from "./order-card.styles";
|
|
6
|
-
|
|
7
|
+
const OrderCardComponent = ({ productImage, price, status, statusText, deliveryDate, hasMoreProducts = false, moreProductsCount = 0, onPress, onDetailsPress, style, testID, }) => {
|
|
7
8
|
const styles = useOrderCardStyles();
|
|
8
9
|
const { colors } = useTheme();
|
|
9
10
|
// Função para gerar o texto de status correto com base no status e na data
|
|
@@ -65,3 +66,5 @@ export const OrderCard = ({ productImage, price, status, statusText, deliveryDat
|
|
|
65
66
|
};
|
|
66
67
|
return (_jsx(TouchableOpacity, { style: [styles.container, style], onPress: handlePress, activeOpacity: 0.7, disabled: !onPress, testID: testID, accessibilityRole: "button", children: _jsxs(View, { style: styles.content, children: [_jsxs(View, { style: styles.imageSection, children: [productImage, hasMoreProducts && moreProductsCount > 0 && (_jsx(View, { style: styles.moreProductsBadge, children: _jsxs(Text, { style: styles.moreProductsText, children: ["+", moreProductsCount] }) }))] }), _jsxs(View, { style: styles.infoSection, children: [_jsx(Text, { style: styles.deliveryDateText, children: getDateText() }), _jsxs(View, { style: styles.detailsContainer, children: [_jsx(View, { style: styles.priceRow, children: _jsx(Text, { style: styles.price, children: formatPrice(price) }) }), _jsxs(View, { style: styles.statusRow, children: [_jsx(View, { style: [styles.statusDot, styles[status]] }), _jsx(Text, { style: styles.statusText, children: getStatusText() })] }), _jsxs(TouchableOpacity, { style: styles.detailsButton, onPress: handleDetailsPress, activeOpacity: 0.7, children: [_jsx(Text, { style: styles.detailsButtonText, children: "Detalhes" }), _jsx(ChevronRightIcon, { size: 16, color: colors.primary, style: styles.detailsIcon })] })] })] })] }) }));
|
|
67
68
|
};
|
|
69
|
+
export const OrderCard = React.memo(OrderCardComponent);
|
|
70
|
+
OrderCard.displayName = "OrderCard";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import type { ProductCardProps } from "./product-card.types";
|
|
3
|
-
export declare const ProductCard: React.
|
|
3
|
+
export declare const ProductCard: React.NamedExoticComponent<ProductCardProps>;
|
|
4
4
|
//# sourceMappingURL=product-card.component.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"product-card.component.d.ts","sourceRoot":"","sources":["../../../src/components/product-card/product-card.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;
|
|
1
|
+
{"version":3,"file":"product-card.component.d.ts","sourceRoot":"","sources":["../../../src/components/product-card/product-card.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AA+I7D,eAAO,MAAM,WAAW,8CAAmC,CAAC"}
|
|
@@ -4,7 +4,7 @@ import { Image, Text, TouchableOpacity, View } from "react-native";
|
|
|
4
4
|
import { HeartIcon, StarIcon } from "../../icons";
|
|
5
5
|
import { Badge } from "../badge";
|
|
6
6
|
import { useProductCardStyles } from "./product-card.styles";
|
|
7
|
-
|
|
7
|
+
const ProductCardComponent = ({ variant = "grid", imageUrl, brand, productName, rating, reviewCount, price, isFavorite = false, onFavoritePress, onPress, testID, flags = [], }) => {
|
|
8
8
|
const styles = useProductCardStyles(variant);
|
|
9
9
|
const handleFavoritePress = React.useCallback((e) => {
|
|
10
10
|
e.stopPropagation();
|
|
@@ -31,3 +31,5 @@ export const ProductCard = ({ variant = "grid", imageUrl, brand, productName, ra
|
|
|
31
31
|
}
|
|
32
32
|
return (_jsx(View, { style: styles.touchable, testID: testID, accessibilityRole: "none", accessibilityLabel: `Produto ${productName}`, children: renderContent() }));
|
|
33
33
|
};
|
|
34
|
+
export const ProductCard = React.memo(ProductCardComponent);
|
|
35
|
+
ProductCard.displayName = "ProductCard";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"product-card.types.d.ts","sourceRoot":"","sources":["../../../src/components/product-card/product-card.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,OAAO,GAAG,YAAY,CAAC;AAEjE,MAAM,WAAW,gBAAgB;IAC/B,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"product-card.types.d.ts","sourceRoot":"","sources":["../../../src/components/product-card/product-card.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,OAAO,GAAG,YAAY,CAAC;AAEjE,MAAM,WAAW,gBAAgB;IAC/B,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE;QACN,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;KACd,EAAE,CAAC;CACL"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import type { ProductHighlightProps, ProductHighlightsContainerProps } from "./product-highlight.types";
|
|
3
|
-
export declare const ProductHighlight: React.
|
|
4
|
-
export declare const ProductHighlightsContainer: React.
|
|
3
|
+
export declare const ProductHighlight: React.NamedExoticComponent<ProductHighlightProps>;
|
|
4
|
+
export declare const ProductHighlightsContainer: React.NamedExoticComponent<ProductHighlightsContainerProps>;
|
|
5
5
|
//# sourceMappingURL=product-highlight.component.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"product-highlight.component.d.ts","sourceRoot":"","sources":["../../../src/components/product-highlight/product-highlight.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EACV,qBAAqB,EACrB,+BAA+B,EAChC,MAAM,2BAA2B,CAAC;
|
|
1
|
+
{"version":3,"file":"product-highlight.component.d.ts","sourceRoot":"","sources":["../../../src/components/product-highlight/product-highlight.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EACV,qBAAqB,EACrB,+BAA+B,EAChC,MAAM,2BAA2B,CAAC;AAgCnC,eAAO,MAAM,gBAAgB,mDAAwC,CAAC;AAetE,eAAO,MAAM,0BAA0B,6DAAkD,CAAC"}
|
|
@@ -1,15 +1,20 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import * as React from "react";
|
|
2
3
|
import { Text, TouchableOpacity, View } from "react-native";
|
|
3
4
|
import { ChevronRightIcon } from "../../icons";
|
|
4
5
|
import { useProductHighlightStyles } from "./product-highlight.styles";
|
|
5
|
-
|
|
6
|
+
const ProductHighlightComponent = ({ title, onPress, shouldRender = true, testID, }) => {
|
|
6
7
|
const styles = useProductHighlightStyles();
|
|
7
8
|
if (!shouldRender) {
|
|
8
9
|
return null;
|
|
9
10
|
}
|
|
10
11
|
return (_jsx(View, { style: styles.highlightContainer, testID: testID, children: _jsxs(TouchableOpacity, { style: styles.highlightButton, onPress: onPress, accessibilityLabel: title, accessibilityRole: "button", children: [_jsx(Text, { style: styles.highlightTitle, children: title }), _jsx(ChevronRightIcon, { size: 20, color: "#101010", style: styles.icon })] }) }));
|
|
11
12
|
};
|
|
12
|
-
export const
|
|
13
|
+
export const ProductHighlight = React.memo(ProductHighlightComponent);
|
|
14
|
+
ProductHighlight.displayName = "ProductHighlight";
|
|
15
|
+
const ProductHighlightsContainerComponent = ({ children, testID }) => {
|
|
13
16
|
const styles = useProductHighlightStyles();
|
|
14
17
|
return (_jsx(View, { style: styles.outerContainer, testID: testID, children: _jsx(View, { style: styles.container, children: children }) }));
|
|
15
18
|
};
|
|
19
|
+
export const ProductHighlightsContainer = React.memo(ProductHighlightsContainerComponent);
|
|
20
|
+
ProductHighlightsContainer.displayName = "ProductHighlightsContainer";
|
|
@@ -2,7 +2,7 @@ import type { StoryObj } from "@storybook/react";
|
|
|
2
2
|
import React from "react";
|
|
3
3
|
declare const meta: {
|
|
4
4
|
title: string;
|
|
5
|
-
component: React.
|
|
5
|
+
component: React.NamedExoticComponent<import("./product-highlight.types").ProductHighlightsContainerProps>;
|
|
6
6
|
argTypes: {};
|
|
7
7
|
args: {
|
|
8
8
|
children: import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import type { ProductListItemProps } from "./product-list-item.types";
|
|
3
|
-
export declare const ProductListItem: React.
|
|
3
|
+
export declare const ProductListItem: React.NamedExoticComponent<ProductListItemProps>;
|
|
4
4
|
//# sourceMappingURL=product-list-item.component.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"product-list-item.component.d.ts","sourceRoot":"","sources":["../../../src/components/product-list-item/product-list-item.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;
|
|
1
|
+
{"version":3,"file":"product-list-item.component.d.ts","sourceRoot":"","sources":["../../../src/components/product-list-item/product-list-item.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAgKtE,eAAO,MAAM,eAAe,kDAAuC,CAAC"}
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import * as React from "react";
|
|
2
3
|
import { Image, Text, TouchableOpacity, View } from "react-native";
|
|
3
4
|
import { MinusIcon, PlusIcon, TrashIcon } from "../../icons";
|
|
4
5
|
import { Loading } from "../loading";
|
|
5
6
|
import { useProductListItemStyles } from "./product-list-item.styles";
|
|
6
|
-
|
|
7
|
+
const ProductListItemComponent = ({ imageUrl, productName, color, size, price, quantity, availableUnits, cashbackText, onAdd, onRemove, onDelete, loadingAdd = false, loadingRemove = false, loadingDelete = false, testID, showControls = true, }) => {
|
|
7
8
|
const styles = useProductListItemStyles();
|
|
8
|
-
const renderQuantityControls = () => (_jsxs(View, { style: { flexDirection: "row", alignItems: "center", width: "100%" }, children: [_jsxs(View, { style: styles.quantityContainer, children: [_jsx(TouchableOpacity, { style: [
|
|
9
|
+
const renderQuantityControls = React.useCallback(() => (_jsxs(View, { style: { flexDirection: "row", alignItems: "center", width: "100%" }, children: [_jsxs(View, { style: styles.quantityContainer, children: [_jsx(TouchableOpacity, { style: [
|
|
9
10
|
styles.quantityButton,
|
|
10
11
|
quantity <= 1 && styles.quantityButtonDisabled,
|
|
11
12
|
], onPress: onRemove, disabled: quantity <= 1 || loadingRemove, accessibilityLabel: "Diminuir quantidade", accessibilityRole: "button", children: loadingRemove ? (_jsx(View, { style: styles.loadingContainer, children: _jsx(Loading, { size: 16, source: require("../../assets/animations/loading-animation.json") }) })) : (_jsx(MinusIcon, { size: 16, color: "#101010" })) }), _jsx(Text, { style: styles.quantityText, children: quantity }), _jsx(TouchableOpacity, { style: [
|
|
@@ -14,6 +15,8 @@ export const ProductListItem = ({ imageUrl, productName, color, size, price, qua
|
|
|
14
15
|
quantity >= availableUnits &&
|
|
15
16
|
styles.quantityButtonDisabled,
|
|
16
17
|
], onPress: onAdd, disabled: (availableUnits !== undefined && quantity >= availableUnits) ||
|
|
17
|
-
loadingAdd, accessibilityLabel: "Aumentar quantidade", accessibilityRole: "button", children: loadingAdd ? (_jsx(View, { style: styles.loadingContainer, children: _jsx(Loading, { size: 16, source: require("../../assets/animations/loading-animation.json") }) })) : (_jsx(PlusIcon, { size: 16, color: "#101010" })) })] }), _jsx(TouchableOpacity, { style: styles.deleteButton, onPress: onDelete, accessibilityLabel: "Remover do carrinho", accessibilityRole: "button", disabled: loadingDelete, children: loadingDelete ? (_jsx(View, { style: styles.loadingContainer, children: _jsx(Loading, { size: 16, source: require("../../assets/animations/loading-animation.json") }) })) : (_jsx(TrashIcon, { size: 20, color: "#101010" })) })] }));
|
|
18
|
+
loadingAdd, accessibilityLabel: "Aumentar quantidade", accessibilityRole: "button", children: loadingAdd ? (_jsx(View, { style: styles.loadingContainer, children: _jsx(Loading, { size: 16, source: require("../../assets/animations/loading-animation.json") }) })) : (_jsx(PlusIcon, { size: 16, color: "#101010" })) })] }), _jsx(TouchableOpacity, { style: styles.deleteButton, onPress: onDelete, accessibilityLabel: "Remover do carrinho", accessibilityRole: "button", disabled: loadingDelete, children: loadingDelete ? (_jsx(View, { style: styles.loadingContainer, children: _jsx(Loading, { size: 16, source: require("../../assets/animations/loading-animation.json") }) })) : (_jsx(TrashIcon, { size: 20, color: "#101010" })) })] })), [availableUnits, loadingAdd, loadingRemove, loadingDelete, onAdd, onRemove, onDelete, quantity, styles]);
|
|
18
19
|
return (_jsxs(View, { style: styles.container, testID: testID, children: [_jsxs(View, { style: styles.topSection, children: [_jsx(View, { style: styles.imageContainer, children: _jsx(Image, { source: { uri: imageUrl }, style: styles.productImage, resizeMode: "cover", accessibilityLabel: `Imagem do produto ${productName}` }) }), _jsxs(View, { style: styles.contentContainer, children: [_jsxs(View, { style: styles.header, children: [cashbackText && (_jsx(View, { style: styles.cashbackBadge, children: _jsx(Text, { style: styles.cashbackText, children: cashbackText }) })), _jsx(Text, { style: styles.productName, numberOfLines: 2, accessibilityLabel: `Nome do produto: ${productName}`, children: productName }), _jsxs(View, { style: styles.infoRow, children: [color && (_jsxs(_Fragment, { children: [_jsx(Text, { style: styles.infoLabel, children: "Cor:" }), _jsx(Text, { style: styles.infoValue, children: color })] })), color && size && _jsx(Text, { style: styles.infoLabel, children: " | " }), size && (_jsxs(_Fragment, { children: [_jsx(Text, { style: styles.infoLabel, children: "Tamanho:" }), _jsx(Text, { style: styles.infoValue, children: size })] }))] })] }), _jsxs(View, { style: styles.priceContainer, children: [_jsx(Text, { style: styles.price, accessibilityLabel: `Preço: ${price}`, children: price }), availableUnits && (_jsxs(Text, { style: styles.availableUnits, children: [availableUnits, " un."] }))] })] })] }), showControls && (_jsx(View, { style: styles.controlsContainer, children: renderQuantityControls() }))] }));
|
|
19
20
|
};
|
|
21
|
+
export const ProductListItem = React.memo(ProductListItemComponent);
|
|
22
|
+
ProductListItem.displayName = "ProductListItem";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import type { ProductReviewProps } from "./product-review.types";
|
|
3
|
-
export declare const ProductReview: React.
|
|
3
|
+
export declare const ProductReview: React.NamedExoticComponent<ProductReviewProps>;
|
|
4
4
|
//# sourceMappingURL=product-review.component.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"product-review.component.d.ts","sourceRoot":"","sources":["../../../src/components/product-review/product-review.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;
|
|
1
|
+
{"version":3,"file":"product-review.component.d.ts","sourceRoot":"","sources":["../../../src/components/product-review/product-review.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAmFjE,eAAO,MAAM,aAAa,gDAAqC,CAAC"}
|