@semcore/carousel 1.6.2 → 2.0.0

package/src/Carousel.jsx

@@ -39,7 +39,7 @@ const MAP_TRANSFORM = {
   ArrowRight: 'right',
 };
 
-class Carousel extends Component {
+class CarouselRoot extends Component {
   static displayName = 'Carousel';
   static defaultProps = {
     defaultIndex: 0,
@@ -331,6 +331,7 @@ class Carousel extends Component {
       items: items.map((item, key) => ({
         active: key === index,
         onClick: this.bindHandlerClickIndicator(key),
+        key,
       })),
     };
   }
@@ -383,7 +384,7 @@ const Prev = (props) => {
 };
 
 Prev.defaultProps = () => ({
-  children: <ChevronLeft interactive color="stone" aria-hidden={true} role="button" />,
+  children: <ChevronLeft interactive color="gray-300" aria-hidden={true} role="button" />,
   top: 0,
 });
 
@@ -394,29 +395,44 @@ const Next = (props) => {
 };
 
 Next.defaultProps = () => ({
-  children: <ChevronRight interactive color="stone" aria-hidden={true} role="button" />,
+  children: <ChevronRight interactive color="gray-300" aria-hidden={true} role="button" />,
   top: 0,
 });
 
 const Indicators = ({ items, styles, Children }) => {
   const SIndicators = Root;
-  const SIndicator = Box;
   if (Children.origin) {
-    return <Children />;
+    return sstyled(styles)(
+      <SIndicators render={Box}>
+        <Children />
+      </SIndicators>,
+    );
   }
   return sstyled(styles)(
     <SIndicators render={Box}>
-      {items.map((item) => (
-        <SIndicator {...item} />
+      {items.map((item, index) => (
+        <Carousel.Indicator key={index} {...item} />
       ))}
     </SIndicators>,
   );
 };
 
-export default createComponent(Carousel, {
+const Indicator = ({ styles, Children }) => {
+  const SIndicator = Root;
+  return sstyled(styles)(
+    <SIndicator render={Box}>
+      <Children />
+    </SIndicator>,
+  );
+};
+
+const Carousel = createComponent(CarouselRoot, {
   Container,
   Indicators,
+  Indicator,
   Item,
   Prev,
   Next,
 });
+
+export default Carousel;

package/src/index.d.ts

@@ -7,7 +7,7 @@ type ChildRenderFn<Props> = Props & {
     items,
   }: {
     items: { active: boolean; onClick: () => void }[];
-  }) => React.ReactElement;
+  }) => React.ReactElement | React.ReactElement[];
 };
 
 export interface ICarouselProps {
@@ -48,6 +48,9 @@ declare const Carousel: (<T>(
 ) => ReturnEl) & {
   Container: <T>(props: IBoxProps & T) => ReturnEl;
   Indicators: <T>(props: ChildRenderFn<IBoxProps & T>) => ReturnEl;
+  Indicator: <T>(
+    props: ChildRenderFn<IBoxProps & { active: boolean; onClick: () => void } & T>,
+  ) => ReturnEl;
   Item: <T>(props: IBoxProps & T) => ReturnEl;
   Prev: <T>(props: IBoxProps & T) => ReturnEl;
   Next: <T>(props: IBoxProps & T) => ReturnEl;

package/src/index.js

@@ -1,2 +1 @@
 export { default } from './Carousel';
-export * from './Carousel';

package/src/style/carousel.shadow.css

@@ -15,6 +15,8 @@ SItem {
   max-width: 100%;
   box-sizing: border-box;
   transform: var(--transform);
+  border-radius: 6px;
+  overflow: hidden;
 }
 
 SIndicators {
@@ -24,28 +26,24 @@ SIndicators {
 }
 
 SIndicator {
-  margin: 0 5px;
-  padding: 0 5px;
+  margin: 0 6px;
   cursor: pointer;
+  display: block;
+  width: 12px;
+  height: 12px;
+  border-radius: 6px;
+  background-color: var(--gray-300);
+  opacity: 0.3;
+  object-fit: cover;
+  transition: ease-in-out opacity 0.1s;
+}
 
-  &::before {
-    content: '';
-    display: block;
-    width: 12px;
-    height: 12px;
-    border-radius: 50%;
-    background-color: color-mod(var(--stone) a(30%));
-  }
-
-  &:hover::before {
-    background-color: color-mod(var(--stone) a(60%));
-  }
+SIndicator:hover {
+  opacity: 0.6;
 }
 
 SIndicator[active] {
-  &::before {
-    background-color: var(--stone);
-  }
+  opacity: 1;
 }
 
 SPrev,
@@ -56,6 +54,13 @@ SNext {
   cursor: pointer;
 }
 
+SPrev {
+  margin-right: 12px;
+}
+SNext {
+  margin-left: 12px;
+}
+
 SPrev[disabled],
 SNext[disabled] {
   opacity: var(--disabled-opacity);