@semcore/carousel 3.17.1-prerelease.1 → 3.18.0

package/src/Carousel.types.ts

@@ -0,0 +1,122 @@
+import { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';
+import { BoxProps } from '@semcore/flex-box';
+import { IRootComponentProps } from '@semcore/core/src';
+
+/** @deprecated */
+export interface ICarouselProps extends CarouselProps, UnknownProperties {}
+export type CarouselProps = BoxProps & {
+  /** Index active item */
+  index?: number;
+  /**
+   * Index of the active item selected by default
+   * @default 0
+   */
+  defaultIndex?: number;
+  /**  Called when the selection is changed */
+  onIndexChange?: (index: number) => void;
+  /** Animation duration
+   * @default 300 */
+  duration?: number;
+  /** Disables infinite items change in the carousel
+   * @default false */
+  bounded?: boolean;
+  /** @ignore  */
+  step?: number;
+  locale?: string;
+  /** Enable zoom feature for carousel items */
+  zoom?: boolean;
+  /** Width for items in zooming modal */
+  zoomWidth?: number;
+  /** Type of indicators */
+  indicators?: 'default' | 'hide' | 'preview';
+};
+
+/** @deprecated */
+export interface ICarouselContext extends CarouselContext, UnknownProperties {}
+export type CarouselContext = {
+  getContainerProps: PropGetterFn;
+  getItemProps: PropGetterFn;
+  getPrevProps: PropGetterFn;
+  getNextProps: PropGetterFn;
+  getIndicatorsProps: PropGetterFn;
+};
+
+export type CarouselItem = {
+  node: HTMLElement;
+};
+
+export type CarouselItemProps = BoxProps & {
+  /** Flag for css cursor
+   * @private
+   */
+  zoomIn?: boolean;
+  /** Flag for css cursor
+   * @private
+   */
+  zoomOut?: boolean;
+
+  /** Function to add item to list in Carousel
+   * @private
+   */
+  toggleItem?: (item: CarouselItem, toRemove?: boolean) => void;
+
+  /** Index of item in carousel */
+  index?: number;
+
+  uid?: string;
+
+  /** Flag - is current item shown now */
+  current?: boolean;
+
+  /** Handler for show item in modal window
+   * @private
+   */
+  onToggleZoomModal?: () => void;
+
+  /** Value for transform item
+   * @private
+   */
+  transform?: number;
+};
+
+/** @deprecated */
+export interface ICarouselState extends CarouselState, UnknownProperties {}
+export type CarouselState = {
+  isOpenZoom: boolean;
+  selectedIndex: number;
+  items: CarouselItem[];
+};
+
+export type CarouselButtonProps = IRootComponentProps &
+  BoxProps & {
+    label?: string;
+    inverted?: boolean;
+  };
+
+export type CarouselIndicatorsProps = IRootComponentProps &
+  BoxProps & {
+    items?: CarouselItem[];
+    inverted?: boolean;
+  };
+
+export type CarouselIndicatorProps = IRootComponentProps &
+  Omit<BoxProps, 'position'> & {
+    active?: boolean;
+    onClick?: () => void;
+    inverted?: boolean;
+  } & CarouselItem;
+
+declare const CarouselType: Intergalactic.Component<
+  'div',
+  CarouselProps,
+  CarouselContext & CarouselState
+> & {
+  Container: Intergalactic.Component<'div', BoxProps>;
+  Indicators: Intergalactic.Component<'div', CarouselIndicatorsProps, CarouselState>;
+  Indicator: Intergalactic.Component<'div', CarouselIndicatorProps>;
+  Item: Intergalactic.Component<'div', CarouselItemProps>;
+  Prev: Intergalactic.Component<'div', CarouselButtonProps>;
+  Next: Intergalactic.Component<'div', CarouselButtonProps>;
+};
+
+export default CarouselType;

package/src/style/carousel.shadow.css

@@ -1,6 +1,7 @@
 SCarousel {
   overflow: hidden;
   outline: none;
+  user-select: none;
 }
 
 SContainer {
@@ -8,6 +9,11 @@ SContainer {
   transition: transform var(--duration) ease-in-out;
 }
 
+SModalContainer {
+  display: flex;
+  transition: transform var(--duration) ease-in-out;
+}
+
 SItem {
   flex: 0 0 100%;
   max-width: 100%;
@@ -17,6 +23,13 @@ SItem {
   overflow: hidden;
 }
 
+SItem[zoomIn] {
+  cursor: zoom-in;
+}
+SItem[zoomOut] {
+  cursor: zoom-out;
+}
+
 SIndicators {
   display: flex;
   justify-content: center;
@@ -44,6 +57,10 @@ SIndicator[active] {
   opacity: 1;
 }
 
+SIndicator[inverted] {
+  background-color: var(--intergalactic-icon-primary-invert, #ffffff);
+}
+
 SPrev,
 SNext {
   display: inline-flex;
@@ -54,10 +71,10 @@ SNext {
 }
 
 SPrev {
-  margin-right: var(--intergalactic-spacing-3x, 12px);
+  margin-right: var(--intergalactic-spacing-2x, 8px);
 }
 SNext {
-  margin-left: var(--intergalactic-spacing-3x, 12px);
+  margin-left: var(--intergalactic-spacing-2x, 8px);
 }
 
 SPrev[disabled],

package/lib/cjs/index.d.js

@@ -1,2 +0,0 @@
-"use strict";
-//# sourceMappingURL=index.d.js.map

package/lib/cjs/index.d.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React from 'react';\nimport { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';\nimport { BoxProps } from '@semcore/flex-box';\n\ntype ChildRenderFn<Props> = Props & {\n  children?: ({\n    items,\n  }: {\n    items: { active: boolean; onClick: () => void }[];\n  }) => React.ReactElement | React.ReactElement[];\n};\n\n/** @deprecated */\nexport interface ICarouselProps extends CarouselProps, UnknownProperties {}\nexport type CarouselProps = BoxProps & {\n  /** Index active item */\n  index?: number;\n  /**\n   * Index of the active item selected by default\n   * @default 0\n   */\n  defaultIndex?: number;\n  /**  Called when the selection is changed */\n  onIndexChange?: (index: number) => void;\n  /** Animation duration\n   * @default 300 */\n  duration?: number;\n  /** Disables infinite items change in the carousel\n   * @default false */\n  bounded?: boolean;\n  /** @ignore  */\n  step?: number;\n  locale?: string;\n};\n\n/** @deprecated */\nexport interface ICarouselContext extends CarouselContext, UnknownProperties {}\nexport type CarouselContext = {\n  getContainerProps: PropGetterFn;\n  getItemProps: PropGetterFn;\n  getPrevProps: PropGetterFn;\n  getNextProps: PropGetterFn;\n  getIndicatorsProps: PropGetterFn;\n};\n\n/** @deprecated */\nexport interface ICarouselState extends CarouselState, UnknownProperties {}\nexport type CarouselState = {\n  // eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope\n  items: { transform: number; position: number; node: HTMLDivElement }[];\n};\n\ndeclare const Carousel: Intergalactic.Component<\n  'div',\n  CarouselProps,\n  CarouselContext & CarouselState\n> & {\n  Container: Intergalactic.Component<'div', BoxProps>;\n  Indicators: Intergalactic.Component<'div', BoxProps, CarouselState>;\n  Indicator: Intergalactic.Component<\n    'div',\n    Omit<BoxProps, 'position'> & {\n      active?: boolean;\n      onClick?: () => void;\n      transform?: number;\n      position?: number;\n      // eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope\n      node?: HTMLDivElement;\n    }\n  >;\n  Item: Intergalactic.Component<'div', BoxProps>;\n  Prev: Intergalactic.Component<'div', BoxProps>;\n  Next: Intergalactic.Component<'div', BoxProps>;\n};\n\nexport default Carousel;\n"],"mappings":""}

package/lib/es6/index.d.js

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=index.d.js.map

package/lib/es6/index.d.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React from 'react';\nimport { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';\nimport { BoxProps } from '@semcore/flex-box';\n\ntype ChildRenderFn<Props> = Props & {\n  children?: ({\n    items,\n  }: {\n    items: { active: boolean; onClick: () => void }[];\n  }) => React.ReactElement | React.ReactElement[];\n};\n\n/** @deprecated */\nexport interface ICarouselProps extends CarouselProps, UnknownProperties {}\nexport type CarouselProps = BoxProps & {\n  /** Index active item */\n  index?: number;\n  /**\n   * Index of the active item selected by default\n   * @default 0\n   */\n  defaultIndex?: number;\n  /**  Called when the selection is changed */\n  onIndexChange?: (index: number) => void;\n  /** Animation duration\n   * @default 300 */\n  duration?: number;\n  /** Disables infinite items change in the carousel\n   * @default false */\n  bounded?: boolean;\n  /** @ignore  */\n  step?: number;\n  locale?: string;\n};\n\n/** @deprecated */\nexport interface ICarouselContext extends CarouselContext, UnknownProperties {}\nexport type CarouselContext = {\n  getContainerProps: PropGetterFn;\n  getItemProps: PropGetterFn;\n  getPrevProps: PropGetterFn;\n  getNextProps: PropGetterFn;\n  getIndicatorsProps: PropGetterFn;\n};\n\n/** @deprecated */\nexport interface ICarouselState extends CarouselState, UnknownProperties {}\nexport type CarouselState = {\n  // eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope\n  items: { transform: number; position: number; node: HTMLDivElement }[];\n};\n\ndeclare const Carousel: Intergalactic.Component<\n  'div',\n  CarouselProps,\n  CarouselContext & CarouselState\n> & {\n  Container: Intergalactic.Component<'div', BoxProps>;\n  Indicators: Intergalactic.Component<'div', BoxProps, CarouselState>;\n  Indicator: Intergalactic.Component<\n    'div',\n    Omit<BoxProps, 'position'> & {\n      active?: boolean;\n      onClick?: () => void;\n      transform?: number;\n      position?: number;\n      // eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope\n      node?: HTMLDivElement;\n    }\n  >;\n  Item: Intergalactic.Component<'div', BoxProps>;\n  Prev: Intergalactic.Component<'div', BoxProps>;\n  Next: Intergalactic.Component<'div', BoxProps>;\n};\n\nexport default Carousel;\n"],"mappings":""}

package/lib/types/index.d.ts

@@ -1,76 +0,0 @@
-import React from 'react';
-import { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';
-import { BoxProps } from '@semcore/flex-box';
-
-type ChildRenderFn<Props> = Props & {
-  children?: ({
-    items,
-  }: {
-    items: { active: boolean; onClick: () => void }[];
-  }) => React.ReactElement | React.ReactElement[];
-};
-
-/** @deprecated */
-export interface ICarouselProps extends CarouselProps, UnknownProperties {}
-export type CarouselProps = BoxProps & {
-  /** Index active item */
-  index?: number;
-  /**
-   * Index of the active item selected by default
-   * @default 0
-   */
-  defaultIndex?: number;
-  /**  Called when the selection is changed */
-  onIndexChange?: (index: number) => void;
-  /** Animation duration
-   * @default 300 */
-  duration?: number;
-  /** Disables infinite items change in the carousel
-   * @default false */
-  bounded?: boolean;
-  /** @ignore  */
-  step?: number;
-  locale?: string;
-};
-
-/** @deprecated */
-export interface ICarouselContext extends CarouselContext, UnknownProperties {}
-export type CarouselContext = {
-  getContainerProps: PropGetterFn;
-  getItemProps: PropGetterFn;
-  getPrevProps: PropGetterFn;
-  getNextProps: PropGetterFn;
-  getIndicatorsProps: PropGetterFn;
-};
-
-/** @deprecated */
-export interface ICarouselState extends CarouselState, UnknownProperties {}
-export type CarouselState = {
-  // eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
-  items: { transform: number; position: number; node: HTMLDivElement }[];
-};
-
-declare const Carousel: Intergalactic.Component<
-  'div',
-  CarouselProps,
-  CarouselContext & CarouselState
-> & {
-  Container: Intergalactic.Component<'div', BoxProps>;
-  Indicators: Intergalactic.Component<'div', BoxProps, CarouselState>;
-  Indicator: Intergalactic.Component<
-    'div',
-    Omit<BoxProps, 'position'> & {
-      active?: boolean;
-      onClick?: () => void;
-      transform?: number;
-      position?: number;
-      // eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
-      node?: HTMLDivElement;
-    }
-  >;
-  Item: Intergalactic.Component<'div', BoxProps>;
-  Prev: Intergalactic.Component<'div', BoxProps>;
-  Next: Intergalactic.Component<'div', BoxProps>;
-};
-
-export default Carousel;