@helpdice/ui 1.7.7 → 1.7.9

package/esm/carousal/component/types.d.ts

@@ -0,0 +1,79 @@
+export interface AnimationHandlerResponse {
+    itemListStyle?: React.CSSProperties;
+    slideStyle?: React.CSSProperties;
+    selectedStyle?: React.CSSProperties;
+    prevStyle?: React.CSSProperties;
+}
+export type AnimationHandler = (props: CarouselProps, state: CarouselState) => AnimationHandlerResponse;
+export type SwipeAnimationHandler = (delta: {
+    x: number;
+    y: number;
+}, props: CarouselProps, state: CarouselState, setState: Function) => AnimationHandlerResponse;
+export type StopSwipingHandler = (props: CarouselProps, state: CarouselState) => AnimationHandlerResponse;
+export interface CarouselProps {
+    ariaLabel?: string | undefined;
+    axis: 'horizontal' | 'vertical';
+    autoFocus?: boolean;
+    autoPlay?: boolean;
+    centerMode?: boolean;
+    centerSlidePercentage: number;
+    children?: React.ReactChild[];
+    className?: string;
+    dynamicHeight?: boolean;
+    emulateTouch?: boolean;
+    infiniteLoop?: boolean;
+    interval: number;
+    labels: {
+        leftArrow: string;
+        rightArrow: string;
+        item: string;
+    };
+    onClickItem: (index: number, item: React.ReactNode) => void;
+    onClickThumb: (index: number, item: React.ReactNode) => void;
+    onChange: (index: number, item: React.ReactNode) => void;
+    onSwipeStart: (event: React.TouchEvent) => void;
+    onSwipeEnd: (event: React.TouchEvent) => void;
+    onSwipeMove: (event: React.TouchEvent) => boolean;
+    preventMovementUntilSwipeScrollTolerance: boolean;
+    renderArrowPrev: (clickHandler: () => void, hasPrev: boolean, label: string) => React.ReactNode;
+    renderArrowNext: (clickHandler: () => void, hasNext: boolean, label: string) => React.ReactNode;
+    renderIndicator: (clickHandler: (e: React.MouseEvent | React.KeyboardEvent) => void, isSelected: boolean, index: number, label: string) => React.ReactNode;
+    renderItem: (item: React.ReactNode, options?: {
+        isSelected: boolean;
+        isPrevious: boolean;
+    }) => React.ReactNode;
+    renderThumbs: (children: React.ReactChild[]) => React.ReactChild[];
+    selectedItem: number;
+    showArrows: boolean;
+    showStatus: boolean;
+    showIndicators: boolean;
+    showThumbs: boolean;
+    statusFormatter: (currentItem: number, total: number) => string;
+    stopOnHover: boolean;
+    swipeable: boolean;
+    swipeScrollTolerance: number;
+    thumbWidth?: number;
+    transitionTime: number;
+    useKeyboardArrows?: boolean;
+    verticalSwipe: 'natural' | 'standard';
+    width: number | string;
+    animationHandler: 'slide' | 'fade' | AnimationHandler;
+    swipeAnimationHandler: SwipeAnimationHandler;
+    stopSwipingHandler: StopSwipingHandler;
+}
+export interface CarouselState {
+    autoPlay?: boolean;
+    cancelClick: boolean;
+    hasMount: boolean;
+    initialized: boolean;
+    isMouseEntered: boolean;
+    itemSize: number;
+    previousItem: number;
+    selectedItem: number;
+    swiping?: boolean;
+    swipeMovementStarted: boolean;
+    itemListStyle?: React.CSSProperties;
+    slideStyle?: React.CSSProperties;
+    selectedStyle?: React.CSSProperties;
+    prevStyle?: React.CSSProperties;
+}

package/esm/carousal/component/utils.d.ts

@@ -0,0 +1,15 @@
+import { CarouselProps } from './types';
+export declare const noop: () => void;
+export declare const defaultStatusFormatter: (current: number, total: number) => string;
+export declare const isKeyboardEvent: (e?: React.MouseEvent | React.KeyboardEvent) => e is React.KeyboardEvent;
+/**
+ * Gets the list 'position' relative to a current index
+ * @param index
+ */
+export declare const getPosition: (index: number, props: CarouselProps) => number;
+/**
+ * Sets the 'position' transform for sliding animations
+ * @param position
+ * @param forceReflow
+ */
+export declare const setPosition: (position: number, axis: "horizontal" | "vertical") => React.CSSProperties;

package/esm/carousal/{utils.js → component/utils.js}

@@ -1,5 +1,5 @@
 import { Children } from 'react';
-import CSSTranslate from '../../CSSTranslate';
+import CSSTranslate from '../CSSTranslate';
 export var noop = function noop() {};
 export var defaultStatusFormatter = function defaultStatusFormatter(current, total) {
   return "".concat(current, " of ").concat(total);

package/esm/carousal/cssClasses.d.ts

@@ -0,0 +1,11 @@
+declare const _default: {
+    ROOT: (customClassName?: string) => string;
+    CAROUSEL: (isSlider?: boolean) => string;
+    WRAPPER: (isSlider: boolean, axis?: "horizontal" | "vertical") => string;
+    SLIDER: (isSlider: boolean, isSwiping?: boolean) => string;
+    ITEM: (isSlider: boolean, selected: boolean, previous?: boolean) => string;
+    ARROW_PREV: (disabled?: boolean) => string;
+    ARROW_NEXT: (disabled?: boolean) => string;
+    DOT: (selected?: boolean) => string;
+};
+export default _default;

package/esm/carousal/cssClasses.js

@@ -0,0 +1,56 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import classNames from 'classnames';
+export default {
+  ROOT: function ROOT(customClassName) {
+    return classNames(_defineProperty({
+      'carousel-root': true
+    }, customClassName || '', !!customClassName));
+  },
+  CAROUSEL: function CAROUSEL(isSlider) {
+    return classNames({
+      carousel: true,
+      'carousel-slider': isSlider
+    });
+  },
+  WRAPPER: function WRAPPER(isSlider, axis) {
+    return classNames({
+      'thumbs-wrapper': !isSlider,
+      'slider-wrapper': isSlider,
+      'axis-horizontal': axis === 'horizontal',
+      'axis-vertical': axis !== 'horizontal'
+    });
+  },
+  SLIDER: function SLIDER(isSlider, isSwiping) {
+    return classNames({
+      thumbs: !isSlider,
+      slider: isSlider,
+      animated: !isSwiping
+    });
+  },
+  ITEM: function ITEM(isSlider, selected, previous) {
+    return classNames({
+      thumb: !isSlider,
+      slide: isSlider,
+      selected: selected,
+      previous: previous
+    });
+  },
+  ARROW_PREV: function ARROW_PREV(disabled) {
+    return classNames({
+      'control-arrow control-prev': true,
+      'control-disabled': disabled
+    });
+  },
+  ARROW_NEXT: function ARROW_NEXT(disabled) {
+    return classNames({
+      'control-arrow control-next': true,
+      'control-disabled': disabled
+    });
+  },
+  DOT: function DOT(selected) {
+    return classNames({
+      dot: true,
+      selected: selected
+    });
+  }
+};

package/esm/carousal/dimensions.d.ts

@@ -0,0 +1 @@
+export declare const outerWidth: (el: HTMLElement) => number;

package/esm/carousal/dimensions.js

@@ -0,0 +1,6 @@
+export var outerWidth = function outerWidth(el) {
+  var width = el.offsetWidth;
+  var style = getComputedStyle(el);
+  width += parseInt(style.marginLeft) + parseInt(style.marginRight);
+  return width;
+};

package/esm/carousal/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Carousel } from './component';
+export type { CarouselProps } from './component/types';
+export { default as Thumbs } from './component/Thumbs';