@hero-design/rn 8.6.0 → 8.6.1

package/.turbo/turbo-build.log

@@ -1,9 +1,9 @@
-@hero-design/rn:build: cache hit, replaying output 78cd11edb8437bed
-@hero-design/rn:build: $ yarn build:js && yarn build:types
-@hero-design/rn:build: $ rollup -c
-@hero-design/rn:build: 
-@hero-design/rn:build: src/index.ts → lib/index.js, es/index.js...
-@hero-design/rn:build: (!) Plugin replace: @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
-@hero-design/rn:build: (!) Plugin node-resolve: preferring built-in module 'events' over local alternative at '/root/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
-@hero-design/rn:build: created lib/index.js, es/index.js in 24.4s
-@hero-design/rn:build: $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json
+@hero-design/rn:build: cache hit, replaying output 7b99cd6b10674a23
+@hero-design/rn:build: $ yarn build:js && yarn build:types
+@hero-design/rn:build: $ rollup -c
+@hero-design/rn:build: 
+@hero-design/rn:build: src/index.ts → lib/index.js, es/index.js...
+@hero-design/rn:build: (!) Plugin replace: @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
+@hero-design/rn:build: (!) Plugin node-resolve: preferring built-in module 'events' over local alternative at '/root/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
+@hero-design/rn:build: created lib/index.js, es/index.js in 28.2s
+@hero-design/rn:build: $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json

package/es/index.js

@@ -10605,15 +10605,27 @@ var StyledCarouselImage = index$a(Image)(function () {
     resizeMode: 'contain'
   };
 });
-var StyledCarouselContentWrapper = index$a(Box)(function (_ref3) {
-  var width = _ref3.width;
+var StyledCustomSizeCarouselImage = index$a(Image)(function (_ref3) {
+  var height = _ref3.height,
+    _ref3$resizeMode = _ref3.resizeMode,
+    resizeMode = _ref3$resizeMode === void 0 ? 'contain' : _ref3$resizeMode,
+    width = _ref3.width;
+  return {
+    alignSelf: 'center',
+    width: width,
+    height: height,
+    resizeMode: resizeMode
+  };
+});
+var StyledCarouselContentWrapper = index$a(Box)(function (_ref4) {
+  var width = _ref4.width;
   return {
     width: width,
     minHeight: scale(250)
   };
 });
-var StyledCarouselFooterWrapper = index$a(View)(function (_ref4) {
-  var theme = _ref4.theme;
+var StyledCarouselFooterWrapper = index$a(View)(function (_ref5) {
+  var theme = _ref5.theme;
   return {
     paddingHorizontal: theme.__hd__.carousel.space.footerPaddingHorizontal,
     flexDirection: 'row',
@@ -10623,6 +10635,9 @@ var StyledCarouselFooterWrapper = index$a(View)(function (_ref4) {
   };
 });
 
+function isCarouselImageProps(image) {
+  return typeof image !== 'string';
+}
 var CarouselItem = function CarouselItem(_ref) {
   var width = _ref.width,
     image = _ref.image,
@@ -10633,11 +10648,16 @@ var CarouselItem = function CarouselItem(_ref) {
     style: {
       width: width
     }
-  }, image && /*#__PURE__*/React.createElement(StyledCarouselImage, {
-    source: typeof image === 'string' ? {
+  }, image && (isCarouselImageProps(image) ? /*#__PURE__*/React.createElement(StyledCustomSizeCarouselImage, {
+    source: image,
+    height: image.height,
+    width: image.width,
+    resizeMode: image.resizeMode
+  }) : /*#__PURE__*/React.createElement(StyledCarouselImage, {
+    source: {
       uri: image
-    } : image
-  }), /*#__PURE__*/React.createElement(StyledCarouselContentWrapper, {
+    }
+  })), /*#__PURE__*/React.createElement(StyledCarouselContentWrapper, {
     paddingHorizontal: "large",
     marginTop: "large",
     width: width
@@ -10646,7 +10666,7 @@ var CarouselItem = function CarouselItem(_ref) {
   }, body) : null));
 };
 
-var _excluded$e = ["items", "onItemIndexChange", "renderActions", "selectedItemIndex", "style"];
+var _excluded$e = ["items", "onItemIndexChange", "renderActions", "selectedItemIndex", "style", "shouldShowPagination"];
 function useStateFromProp(initialValue) {
   var _useState = useState(initialValue),
     _useState2 = _slicedToArray(_useState, 2),
@@ -10664,6 +10684,10 @@ var Carousel = function Carousel(_ref) {
     _ref$selectedItemInde = _ref.selectedItemIndex,
     selectedItemIndex = _ref$selectedItemInde === void 0 ? 0 : _ref$selectedItemInde,
     style = _ref.style,
+    _ref$shouldShowPagina = _ref.shouldShowPagination,
+    shouldShowPagination = _ref$shouldShowPagina === void 0 ? function () {
+      return true;
+    } : _ref$shouldShowPagina,
     nativeProps = _objectWithoutProperties(_ref, _excluded$e);
   var carouselRef = useRef(null);
   var _useStateFromProp = useStateFromProp(selectedItemIndex),
@@ -10740,7 +10764,7 @@ var Carousel = function Carousel(_ref) {
         width: width
       });
     }
-  }), /*#__PURE__*/React.createElement(StyledCarouselFooterWrapper, null, renderActions && renderActions(currentSlideIndex), /*#__PURE__*/React.createElement(CarouselPaginator, {
+  }), /*#__PURE__*/React.createElement(StyledCarouselFooterWrapper, null, renderActions && renderActions(currentSlideIndex), shouldShowPagination(currentSlideIndex) && /*#__PURE__*/React.createElement(CarouselPaginator, {
     numberOfSlides: items.length,
     scrollX: scrollX
   }))));

package/lib/index.js

@@ -10634,15 +10634,27 @@ var StyledCarouselImage = index$a(Image)(function () {
     resizeMode: 'contain'
   };
 });
-var StyledCarouselContentWrapper = index$a(Box)(function (_ref3) {
-  var width = _ref3.width;
+var StyledCustomSizeCarouselImage = index$a(Image)(function (_ref3) {
+  var height = _ref3.height,
+    _ref3$resizeMode = _ref3.resizeMode,
+    resizeMode = _ref3$resizeMode === void 0 ? 'contain' : _ref3$resizeMode,
+    width = _ref3.width;
+  return {
+    alignSelf: 'center',
+    width: width,
+    height: height,
+    resizeMode: resizeMode
+  };
+});
+var StyledCarouselContentWrapper = index$a(Box)(function (_ref4) {
+  var width = _ref4.width;
   return {
     width: width,
     minHeight: scale(250)
   };
 });
-var StyledCarouselFooterWrapper = index$a(reactNative.View)(function (_ref4) {
-  var theme = _ref4.theme;
+var StyledCarouselFooterWrapper = index$a(reactNative.View)(function (_ref5) {
+  var theme = _ref5.theme;
   return {
     paddingHorizontal: theme.__hd__.carousel.space.footerPaddingHorizontal,
     flexDirection: 'row',
@@ -10652,6 +10664,9 @@ var StyledCarouselFooterWrapper = index$a(reactNative.View)(function (_ref4) {
   };
 });
 
+function isCarouselImageProps(image) {
+  return typeof image !== 'string';
+}
 var CarouselItem = function CarouselItem(_ref) {
   var width = _ref.width,
     image = _ref.image,
@@ -10662,11 +10677,16 @@ var CarouselItem = function CarouselItem(_ref) {
     style: {
       width: width
     }
-  }, image && /*#__PURE__*/React__default["default"].createElement(StyledCarouselImage, {
-    source: typeof image === 'string' ? {
+  }, image && (isCarouselImageProps(image) ? /*#__PURE__*/React__default["default"].createElement(StyledCustomSizeCarouselImage, {
+    source: image,
+    height: image.height,
+    width: image.width,
+    resizeMode: image.resizeMode
+  }) : /*#__PURE__*/React__default["default"].createElement(StyledCarouselImage, {
+    source: {
       uri: image
-    } : image
-  }), /*#__PURE__*/React__default["default"].createElement(StyledCarouselContentWrapper, {
+    }
+  })), /*#__PURE__*/React__default["default"].createElement(StyledCarouselContentWrapper, {
     paddingHorizontal: "large",
     marginTop: "large",
     width: width
@@ -10675,7 +10695,7 @@ var CarouselItem = function CarouselItem(_ref) {
   }, body) : null));
 };
 
-var _excluded$e = ["items", "onItemIndexChange", "renderActions", "selectedItemIndex", "style"];
+var _excluded$e = ["items", "onItemIndexChange", "renderActions", "selectedItemIndex", "style", "shouldShowPagination"];
 function useStateFromProp(initialValue) {
   var _useState = React.useState(initialValue),
     _useState2 = _slicedToArray(_useState, 2),
@@ -10693,6 +10713,10 @@ var Carousel = function Carousel(_ref) {
     _ref$selectedItemInde = _ref.selectedItemIndex,
     selectedItemIndex = _ref$selectedItemInde === void 0 ? 0 : _ref$selectedItemInde,
     style = _ref.style,
+    _ref$shouldShowPagina = _ref.shouldShowPagination,
+    shouldShowPagination = _ref$shouldShowPagina === void 0 ? function () {
+      return true;
+    } : _ref$shouldShowPagina,
     nativeProps = _objectWithoutProperties(_ref, _excluded$e);
   var carouselRef = React.useRef(null);
   var _useStateFromProp = useStateFromProp(selectedItemIndex),
@@ -10769,7 +10793,7 @@ var Carousel = function Carousel(_ref) {
         width: width
       });
     }
-  }), /*#__PURE__*/React__default["default"].createElement(StyledCarouselFooterWrapper, null, renderActions && renderActions(currentSlideIndex), /*#__PURE__*/React__default["default"].createElement(CarouselPaginator, {
+  }), /*#__PURE__*/React__default["default"].createElement(StyledCarouselFooterWrapper, null, renderActions && renderActions(currentSlideIndex), shouldShowPagination(currentSlideIndex) && /*#__PURE__*/React__default["default"].createElement(CarouselPaginator, {
     numberOfSlides: items.length,
     scrollX: scrollX
   }))));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.6.0",
+  "version": "8.6.1",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -21,7 +21,7 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "8.6.0",
+    "@hero-design/colors": "8.6.1",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.21"
@@ -44,7 +44,7 @@
     "@babel/preset-typescript": "^7.17.12",
     "@babel/runtime": "^7.18.9",
     "@emotion/jest": "^11.9.3",
-    "@hero-design/eslint-plugin": "8.6.0",
+    "@hero-design/eslint-plugin": "8.6.1",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "@rollup/plugin-babel": "^5.3.1",
@@ -60,9 +60,9 @@
     "@types/react-native": "^0.67.7",
     "@types/react-native-vector-icons": "^6.4.10",
     "babel-plugin-inline-import": "^3.0.0",
-    "eslint-config-hd": "8.6.0",
+    "eslint-config-hd": "8.6.1",
     "jest": "^27.3.1",
-    "prettier-config-hd": "8.6.0",
+    "prettier-config-hd": "8.6.1",
     "react": "18.0.0",
     "react-native": "0.69.7",
     "react-native-gesture-handler": "~2.1.0",

package/src/components/Carousel/CarouselItem.tsx

@@ -1,18 +1,24 @@
 import React from 'react';
-
 import {
   StyledCarouselContentWrapper,
   StyledCarouselHeading,
   StyledCarouselImage,
+  StyledCustomSizeCarouselImage,
 } from './StyledCarousel';
 import Box from '../Box';
 import Typography from '../Typography';
-import { CarouselData } from './types';
+import { CarouselData, CarouselImageProps } from './types';
 
 interface CarouselItemProps extends Omit<CarouselData, 'background'> {
   width: number;
 }
 
+function isCarouselImageProps(
+  image: CarouselImageProps | string
+): image is CarouselImageProps {
+  return typeof image !== 'string';
+}
+
 const CarouselItem = ({
   width,
   image,
@@ -22,11 +28,17 @@ const CarouselItem = ({
 }: CarouselItemProps) => {
   return (
     <Box style={{ width }}>
-      {image && (
-        <StyledCarouselImage
-          source={typeof image === 'string' ? { uri: image } : image}
-        />
-      )}
+      {image &&
+        (isCarouselImageProps(image) ? (
+          <StyledCustomSizeCarouselImage
+            source={image}
+            height={image.height}
+            width={image.width}
+            resizeMode={image.resizeMode}
+          />
+        ) : (
+          <StyledCarouselImage source={{ uri: image }} />
+        ))}
 
       <StyledCarouselContentWrapper
         paddingHorizontal="large"

package/src/components/Carousel/StyledCarousel.tsx

@@ -1,4 +1,4 @@
-import { View } from 'react-native';
+import { View, ImageResizeMode } from 'react-native';
 import styled from '@emotion/native';
 import Typography from '../Typography';
 import Image from '../Image';
@@ -35,6 +35,17 @@ const StyledCarouselImage = styled(Image)(() => ({
   resizeMode: 'contain',
 }));
 
+const StyledCustomSizeCarouselImage = styled(Image)<{
+  height?: number;
+  width?: number;
+  resizeMode?: ImageResizeMode;
+}>(({ height, resizeMode = 'contain', width }) => ({
+  alignSelf: 'center',
+  width,
+  height,
+  resizeMode,
+}));
+
 const StyledCarouselContentWrapper = styled(Box)<{
   width: number;
 }>(({ width }) => ({
@@ -57,4 +68,5 @@ export {
   StyledCarouselImage,
   StyledCarouselContentWrapper,
   StyledCarouselFooterWrapper,
+  StyledCustomSizeCarouselImage,
 };

package/src/components/Carousel/index.tsx

@@ -46,6 +46,10 @@ interface CarouselProps extends ViewProps {
    * Render action elements function.
    */
   renderActions?: (pageIndex: number) => JSX.Element;
+  /**
+   * Should show paginations
+   */
+  shouldShowPagination?: (pageIndex: number) => boolean;
   /**
    * Current selected item index.
    */
@@ -68,6 +72,7 @@ const Carousel = ({
   renderActions,
   selectedItemIndex = 0,
   style,
+  shouldShowPagination = () => true,
   ...nativeProps
 }: CarouselProps) => {
   const carouselRef = useRef<FlatList>(null);
@@ -147,7 +152,12 @@ const Carousel = ({
         />
         <StyledCarouselFooterWrapper>
           {renderActions && renderActions(currentSlideIndex)}
-          <CarouselPaginator numberOfSlides={items.length} scrollX={scrollX} />
+          {shouldShowPagination(currentSlideIndex) && (
+            <CarouselPaginator
+              numberOfSlides={items.length}
+              scrollX={scrollX}
+            />
+          )}
         </StyledCarouselFooterWrapper>
       </StyledCarouselView>
     </View>

package/src/components/Carousel/types.ts

@@ -1,8 +1,14 @@
 import { ReactNode } from 'react';
-import { ImageSourcePropType } from 'react-native';
+import { ImageSourcePropType, ImageResizeMode } from 'react-native';
+
+export type CarouselImageProps = ImageSourcePropType & {
+  height?: number;
+  width?: number;
+  resizeMode?: ImageResizeMode;
+};
 
 export type CarouselData = {
-  image: ImageSourcePropType | string;
+  image: CarouselImageProps | string;
   content?: ReactNode;
   heading: string;
   body?: string;

package/types/components/Carousel/StyledCarousel.d.ts

@@ -1,4 +1,4 @@
-import { View } from 'react-native';
+import { View, ImageResizeMode } from 'react-native';
 declare const StyledBackDrop: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
@@ -21,6 +21,14 @@ declare const StyledCarouselImage: import("@emotion/native").StyledComponent<imp
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, {}, {}>;
+declare const StyledCustomSizeCarouselImage: import("@emotion/native").StyledComponent<import("../Image").ImageProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    height?: number | undefined;
+    width?: number | undefined;
+    resizeMode?: ImageResizeMode | undefined;
+}, {}, {}>;
 declare const StyledCarouselContentWrapper: import("@emotion/native").StyledComponent<import("../Box").BoxProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
@@ -33,4 +41,4 @@ declare const StyledCarouselFooterWrapper: import("@emotion/native").StyledCompo
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-export { StyledBackDrop, StyledCarouselView, StyledCarouselHeading, StyledCarouselImage, StyledCarouselContentWrapper, StyledCarouselFooterWrapper, };
+export { StyledBackDrop, StyledCarouselView, StyledCarouselHeading, StyledCarouselImage, StyledCarouselContentWrapper, StyledCarouselFooterWrapper, StyledCustomSizeCarouselImage, };

package/types/components/Carousel/index.d.ts

@@ -22,11 +22,15 @@ interface CarouselProps extends ViewProps {
      * Render action elements function.
      */
     renderActions?: (pageIndex: number) => JSX.Element;
+    /**
+     * Should show paginations
+     */
+    shouldShowPagination?: (pageIndex: number) => boolean;
     /**
      * Current selected item index.
      */
     selectedItemIndex?: number;
 }
 export declare function useStateFromProp<T>(initialValue: T): [T, Dispatch<SetStateAction<T>>];
-declare const Carousel: ({ items, onItemIndexChange, renderActions, selectedItemIndex, style, ...nativeProps }: CarouselProps) => JSX.Element;
+declare const Carousel: ({ items, onItemIndexChange, renderActions, selectedItemIndex, style, shouldShowPagination, ...nativeProps }: CarouselProps) => JSX.Element;
 export default Carousel;

package/types/components/Carousel/types.d.ts

@@ -1,7 +1,12 @@
 import { ReactNode } from 'react';
-import { ImageSourcePropType } from 'react-native';
+import { ImageSourcePropType, ImageResizeMode } from 'react-native';
+export declare type CarouselImageProps = ImageSourcePropType & {
+    height?: number;
+    width?: number;
+    resizeMode?: ImageResizeMode;
+};
 export declare type CarouselData = {
-    image: ImageSourcePropType | string;
+    image: CarouselImageProps | string;
     content?: ReactNode;
     heading: string;
     body?: string;