Merge pull request #20 from lad-tech/fix-dots

Fix dots
lad-tech · Nov 1, 2023 · 483bdd7 · 483bdd7
2 parents 234c402 + 821e932
commit 483bdd7
Show file tree

Hide file tree

Showing 13 changed files with 1,338 additions and 178 deletions.
diff --git a/.storybook/stories/other/Example/DotsExample.tsx b/.storybook/stories/other/Example/DotsExample.tsx
@@ -5,7 +5,7 @@ import {Button, Dots, rem, View} from '@lad-tech/mobydick-core';
 const DotsExample = ({length}: {length: number}) => {
   const [activeDot, setActiveDot] = useState(0);
   const [activeDotFirstHalf, setActiveDotFirstHalf] = useState(2);
-  const [activeDotSecondHalf, setActiveDotSecondHalf] = useState(7);
+  const [activeDotSecondHalf, setActiveDotSecondHalf] = useState(3);
 
   const onPressPrevFirstHalf = useCallback(() => {
     if (activeDotFirstHalf !== 0) {
@@ -68,7 +68,12 @@ const DotsExample = ({length}: {length: number}) => {
           paddingHorizontal: rem(20),
         }}>
         <Button text={'Prev'} onPress={onPressPrevSecondHalf} />
-        <Dots length={length} activeDot={activeDotSecondHalf} />
+        <Dots
+          length={length}
+          activeDot={activeDotSecondHalf}
+          fixedSize={rem(6)}
+          activeDotColor={'red'}
+        />
         <Button text={'Next'} onPress={onPressNextSecondHalf} />
       </View>
     </View>

diff --git a/packages/core/src/other/README.md b/packages/core/src/other/README.md
@@ -25,3 +25,7 @@ maxLength —— по default 2, отображает максимальное
 
 isLoop – бесконечная карусель, вы должны понимать, что элементов в ней лучше немного использовать
 isDots – не использовать, они еще в работе
+
+
+## ***Dots***
+fixedSize – будет работать, если элементов меньше 7
diff --git a/packages/core/src/other/components/Carousel/Carousel.tsx b/packages/core/src/other/components/Carousel/Carousel.tsx
@@ -42,6 +42,10 @@ const Carousel = <T,>({
   isScrolling = false,
   ms = 2000,
   indexScroll,
+  dotSize,
+  activeDotColor,
+  passiveDotColor,
+  dotsStyles,
   ...otherProps
 }: ICarouselProps<T>): JSX.Element => {
   const ref = useRef<FlatList>(null);
@@ -231,6 +235,10 @@ const Carousel = <T,>({
           length={data.length}
           activeDot={currIndex}
           animateAutoScroll={animateAutoScroll}
+          fixedSize={dotSize}
+          activeDotColor={activeDotColor}
+          passiveDotColor={passiveDotColor}
+          dotsStyles={dotsStyles}
         />
       )}
     </>

diff --git a/packages/core/src/other/components/Carousel/__tests__/Carousel.test.tsx b/packages/core/src/other/components/Carousel/__tests__/Carousel.test.tsx
@@ -207,6 +207,25 @@ describe('Carousel', () => {
       },
     });
   });
+  it('render Carousel isDots with props', () => {
+    const {toJSON} = render(
+      <SafeAreaProvider>
+        <Carousel
+          data={data}
+          sliderItem={sliderItem}
+          keyExtractor={keyExtractor}
+          isDots={true}
+          activeItemId={'1'}
+          itemWidth={itemWidth}
+          align={ICarouselAlign.start}
+          dotSize={4}
+          activeDotColor={'red'}
+          passiveDotColor={'black'}
+        />
+      </SafeAreaProvider>,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
   it('render Carousel onActiveChange', () => {
     const {toJSON} = render(
       <SafeAreaProvider>