@qsxy/element-plus-react 1.0.0-next.1 → 1.0.0-next.11

package/dist/Carousel/CarouselItem.js

@@ -0,0 +1,59 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _templateObject, _templateObject2;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+import classNames from 'classnames';
+import React, { memo, useMemo } from 'react';
+import { useClassNames } from "../hooks";
+import { useCarouselContext } from "./CarouselContext";
+import { useCarouselItem } from "./hooks/useCarouselItem";
+var CarouselItem = /*#__PURE__*/memo(function (props) {
+  var _props$style;
+  var _props$classPrefix = props.classPrefix,
+    classPrefix = _props$classPrefix === void 0 ? 'carousel' : _props$classPrefix,
+    children = props.children;
+  var _useClassNames = useClassNames(classPrefix),
+    e = _useClassNames.e,
+    em = _useClassNames.em,
+    is = _useClassNames.is;
+  var _useCarouselContext = useCarouselContext(),
+    isCardType = _useCarouselContext.isCardType,
+    isVertical = _useCarouselContext.isVertical;
+  var _useCarouselItem = useCarouselItem(props),
+    carouselItemRef = _useCarouselItem.carouselItemRef,
+    state = _useCarouselItem.state,
+    handleItemClick = _useCarouselItem.handleItemClick;
+  var itemStyle = useMemo(function () {
+    var translateType = "translate".concat(isVertical ? 'Y' : 'X');
+    var _translate = "".concat(translateType, "(").concat(state.translate, "px)");
+    var _scale = "scale(".concat(state.scale, ")");
+    var transform = [_translate, _scale].join(' ');
+    return {
+      transform: transform
+    };
+  }, [isVertical, state.scale, state.translate]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: carouselItemRef,
+    className: classNames(e(_templateObject || (_templateObject = _taggedTemplateLiteral(["item"]))), is({
+      active: state.active,
+      'in-stage': state.inStage,
+      hover: state.hover,
+      animating: state.animating
+    }), _defineProperty(_defineProperty({}, em('item', 'card'), isCardType), em('item', 'card-vertical'), isCardType && isVertical), props.className),
+    style: _objectSpread(_objectSpread({}, itemStyle), {}, {
+      display: state.ready ? '' : 'none'
+    }, (_props$style = props.style) !== null && _props$style !== void 0 ? _props$style : {}),
+    onClick: handleItemClick
+  }, isCardType && /*#__PURE__*/React.createElement("div", {
+    className: e(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["mask"]))),
+    style: {
+      display: !state.active ? '' : 'none'
+    }
+  }), children);
+});
+CarouselItem.displayName = 'ElCarouselItem';
+export default CarouselItem;

package/dist/Carousel/hooks/useCarousel.d.ts

@@ -0,0 +1,37 @@
+/// <reference types="react" />
+/// <reference types="lodash" />
+import { CarouselItemContext, CarouselProps } from '../typings';
+export declare const useCarousel: (props: CarouselProps) => {
+    items: CarouselItemContext[];
+    addItem: (item: CarouselItemContext) => void;
+    removeItem: (uid: string) => void;
+    setContainerHeight: (_height: string | number) => void;
+    root: import("react").MutableRefObject<HTMLDivElement>;
+    activeIndex: number;
+    arrowDisplay: boolean;
+    hasLabel: boolean;
+    hover: boolean;
+    isCardType: boolean;
+    isTransitioning: boolean;
+    isVertical: boolean;
+    containerStyle: {
+        height: string | number;
+        overflow?: undefined;
+    } | {
+        height: number;
+        overflow: string;
+    };
+    isItemsTwoLength: import("react").MutableRefObject<boolean>;
+    handleButtonEnter: (_arrow: 'left' | 'right') => void;
+    handleTransitionEnd: () => void;
+    handleButtonLeave: () => void;
+    handleIndicatorClick: (index: number) => void;
+    handleMouseEnter: () => void;
+    handleMouseLeave: () => void;
+    setActiveItem: (index: number | string) => void;
+    prev: () => void;
+    next: () => void;
+    isTwoLengthShow: (index: number) => boolean;
+    throttledArrowClick: import("lodash").DebouncedFuncLeading<(index: number) => void>;
+    throttledIndicatorHover: import("lodash").DebouncedFuncLeading<(index: number) => void>;
+};

package/dist/Carousel/hooks/useCarousel.js

@@ -0,0 +1,373 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { usePrevious } from 'ahooks';
+import throttle from 'lodash/throttle';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { isString, warning } from "../../Util/base";
+var THROTTLE_TIME = 300;
+export var useCarousel = function useCarousel(props) {
+  var direction = props.direction,
+    arrow = props.arrow,
+    height = props.height,
+    type = props.type,
+    autoplay = props.autoplay,
+    loop = props.loop,
+    interval = props.interval,
+    pauseOnHover = props.pauseOnHover,
+    trigger = props.trigger,
+    initialIndex = props.initialIndex,
+    onChange = props.onChange;
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    items = _useState2[0],
+    setItem = _useState2[1];
+  var addItem = function addItem(item) {
+    return setItem(function (pre) {
+      return [].concat(_toConsumableArray(pre), [item]);
+    });
+  };
+  var removeItem = function removeItem(uid) {
+    return setItem(function (pre) {
+      return pre.filter(function (children) {
+        return children.uid !== uid;
+      });
+    });
+  };
+  var _useState3 = useState(-1),
+    _useState4 = _slicedToArray(_useState3, 2),
+    activeIndex = _useState4[0],
+    setActiveIndex = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    hover = _useState6[0],
+    setHover = _useState6[1];
+  var _useState7 = useState(0),
+    _useState8 = _slicedToArray(_useState7, 2),
+    containerHeight = _useState8[0],
+    setHeight = _useState8[1];
+  var _useState9 = useState(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    isTransitioning = _useState10[0],
+    setIsTransitioning = _useState10[1];
+  var preActiveIndex = usePrevious(activeIndex);
+  var timer = useRef(null);
+  var root = useRef(null);
+  var isItemsTwoLength = useRef(true);
+  var isTransition = useRef(false);
+  var resizeObserver = useRef(null);
+  var isFirstCall = useRef(true);
+  var itemLen = useRef(0);
+  var activeIndexRef = useRef(-1);
+  var isVertical = useMemo(function () {
+    return direction === 'vertical';
+  }, [direction]);
+  var arrowDisplay = useMemo(function () {
+    return arrow !== 'never' && !isVertical;
+  }, [arrow, isVertical]);
+  var hasLabel = useMemo(function () {
+    return items.some(function (item) {
+      var _item$props;
+      return ((_item$props = item.props) === null || _item$props === void 0 || (_item$props = _item$props.label) === null || _item$props === void 0 || (_item$props = _item$props.toString()) === null || _item$props === void 0 ? void 0 : _item$props.length) > 0;
+    });
+  }, [items]);
+  var isCardType = useMemo(function () {
+    return type === 'card';
+  }, [type]);
+  var containerStyle = useMemo(function () {
+    if (height !== 'auto') {
+      return {
+        height: height
+      };
+    }
+    return {
+      height: containerHeight,
+      overflow: 'hidden'
+    };
+  }, [containerHeight, height]);
+  var resetItemPosition = useCallback(function (oldIndex) {
+    items.forEach(function (item, index) {
+      item.translateItem(index, activeIndex, oldIndex);
+    });
+  }, [activeIndex, items]);
+  var playSlides = useCallback(function () {
+    if (!isFirstCall.current && !isTransition.current) {
+      isTransition.current = true;
+      setIsTransitioning(true);
+    }
+    isFirstCall.current = false;
+    if (activeIndexRef.current < itemLen.current - 1) {
+      setActiveIndex(function (pre) {
+        return pre + 1;
+      });
+    } else if (loop) {
+      setActiveIndex(0);
+    } else {
+      isTransition.current = false;
+      setIsTransitioning(false);
+    }
+  }, [loop]);
+  var startTimer = useCallback(function () {
+    if (interval <= 0 || !autoplay || timer.current) {
+      return;
+    }
+    timer.current = setInterval(function () {
+      return playSlides();
+    }, interval);
+  }, [autoplay, interval, playSlides]);
+  var pauseTimer = useCallback(function () {
+    if (timer.current) {
+      clearInterval(timer.current);
+      timer.current = null;
+    }
+  }, []);
+  var resetTimer = useCallback(function () {
+    pauseTimer();
+    if (!pauseOnHover) {
+      startTimer();
+    }
+  }, [pauseOnHover, pauseTimer, startTimer]);
+  var setActiveItem = useCallback(function (index) {
+    if (!isFirstCall.current) {
+      isTransition.current = true;
+      setIsTransitioning(true);
+    }
+    isFirstCall.current = false;
+    if (isString(index)) {
+      var filteredItems = items.filter(function (item) {
+        return item.props.name === index;
+      });
+      if (filteredItems.length > 0) {
+        index = items.indexOf(filteredItems[0]);
+      }
+    }
+    index = Number(index);
+    if (Number.isNaN(index) || index !== Math.floor(index)) {
+      warning(false, 'component ElCarouselItem: index must be integer.');
+      return;
+    }
+    var itemCount = items.length;
+    var oldIndex = activeIndex;
+    if (index < 0) {
+      setActiveIndex(loop ? itemCount - 1 : 0);
+    } else if (index >= itemCount) {
+      setActiveIndex(loop ? 0 : itemCount - 1);
+    } else {
+      setActiveIndex(index);
+    }
+    if (oldIndex === activeIndex) {
+      resetItemPosition(oldIndex);
+    }
+    resetTimer();
+  }, [activeIndex, isFirstCall, items, loop, resetItemPosition, resetTimer]);
+  var throttledArrowClick = useCallback(function (index) {
+    setActiveItem(index);
+  }, [setActiveItem]);
+  var handleIndicatorHover = useCallback(function (index) {
+    if (trigger === 'hover' && index !== activeIndex) {
+      setActiveIndex(index);
+      if (!isFirstCall.current) {
+        isTransition.current = true;
+        setIsTransitioning(true);
+      }
+    }
+  }, [activeIndex, isFirstCall, trigger]);
+  var throttledIndicatorHover = useCallback(function (index) {
+    handleIndicatorHover(index);
+  }, [handleIndicatorHover]);
+  var isTwoLengthShow = useCallback(function (index) {
+    if (!isItemsTwoLength.current) {
+      return true;
+    }
+    return activeIndex <= 1 ? index <= 1 : index > 1;
+  }, [activeIndex]);
+  var itemInStage = useCallback(function (item, index) {
+    var _items$nextItemIndex, _items$prevItemIndex;
+    var itemCount = items.length;
+    if (itemCount === 0 || !item.states.inStage) {
+      return false;
+    }
+    var nextItemIndex = index + 1;
+    var prevItemIndex = index - 1;
+    var lastItemIndex = itemCount - 1;
+    var isLastItemActive = items[lastItemIndex].states.active;
+    var isFirstItemActive = items[0].states.active;
+    var isNextItemActive = (_items$nextItemIndex = items[nextItemIndex]) === null || _items$nextItemIndex === void 0 || (_items$nextItemIndex = _items$nextItemIndex.states) === null || _items$nextItemIndex === void 0 ? void 0 : _items$nextItemIndex.active;
+    var isPrevItemActive = (_items$prevItemIndex = items[prevItemIndex]) === null || _items$prevItemIndex === void 0 || (_items$prevItemIndex = _items$prevItemIndex.states) === null || _items$prevItemIndex === void 0 ? void 0 : _items$prevItemIndex.active;
+    if (index === lastItemIndex && isFirstItemActive || isNextItemActive) {
+      return 'left';
+    } else if (index === 0 && isLastItemActive || isPrevItemActive) {
+      return 'right';
+    }
+    return false;
+  }, [items]);
+  var handleMouseEnter = useCallback(function () {
+    setHover(true);
+    if (pauseOnHover) {
+      pauseTimer();
+    }
+  }, [pauseOnHover, pauseTimer]);
+  var handleMouseLeave = useCallback(function () {
+    setHover(false);
+    startTimer();
+  }, [startTimer]);
+  var handleTransitionEnd = useCallback(function () {
+    isTransition.current = false;
+    setIsTransitioning(false);
+  }, []);
+  var handleButtonEnter = useCallback(function (_arrow) {
+    if (isVertical) {
+      return;
+    }
+    items.forEach(function (item, index) {
+      // @ts-ignore
+      if (_arrow === itemInStage(item, index)) {
+        item.setState({
+          hover: true
+        });
+      }
+    });
+  }, [isVertical, itemInStage, items]);
+  var handleButtonLeave = useCallback(function () {
+    if (isVertical) {
+      return;
+    }
+    items.forEach(function (item) {
+      item.setState({
+        hover: false
+      });
+    });
+  }, [isVertical, items]);
+  var handleIndicatorClick = function handleIndicatorClick(index) {
+    if (index !== activeIndex) {
+      if (!isFirstCall.current) {
+        isTransition.current = true;
+        setIsTransitioning(true);
+      }
+    }
+    setActiveIndex(index);
+  };
+  var prev = useCallback(function () {
+    setActiveItem(activeIndex - 1);
+  }, [activeIndex, setActiveItem]);
+  var next = useCallback(function () {
+    setActiveItem(activeIndex + 1);
+  }, [activeIndex, setActiveItem]);
+  var setContainerHeight = useCallback(function (_height) {
+    if (height !== 'auto') {
+      return;
+    }
+    setHeight(_height);
+  }, [height]);
+
+  // const PlaceholderItem=() =>{
+  //     // fix: https://github.com/element-plus/element-plus/issues/12139
+  //     const defaultSlots = slots.default?.();
+  //     if (!defaultSlots) return null;
+
+  //     const flatSlots = flattedChildren(defaultSlots);
+
+  //     const normalizeSlots = flatSlots.filter(slot => {
+  //         return isVNode(slot) && (slot.type as any).name === CAROUSEL_ITEM_NAME;
+  //     });
+
+  //     if (normalizeSlots?.length === 2 && loop && !isCardType) {
+  //         isItemsTwoLength = true;
+  //         return normalizeSlots;
+  //     }
+  //     isItemsTwoLength = false;
+  //     return null;
+  // }
+
+  useEffect(function () {
+    activeIndexRef.current = activeIndex;
+    resetItemPosition(preActiveIndex);
+    var current, _prev;
+    if (isItemsTwoLength.current) {
+      current = activeIndex % 2;
+      _prev = preActiveIndex % 2;
+    }
+    if (preActiveIndex > -1) {
+      onChange === null || onChange === void 0 || onChange(current, _prev);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [activeIndex]);
+  useEffect(function () {
+    setActiveItem(activeIndex);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [loop]);
+  useEffect(function () {
+    resetTimer();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [interval]);
+  useEffect(function () {
+    if (items.length > 0) {
+      setActiveItem(initialIndex);
+    }
+    itemLen.current = items.length;
+    isItemsTwoLength.current = (items === null || items === void 0 ? void 0 : items.length) === 2 && props.loop && !isCardType;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [items]);
+  useEffect(function () {
+    if (autoplay) {
+      startTimer();
+    } else {
+      pauseTimer();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [autoplay, items.length]);
+  useEffect(function () {
+    if (root.current) {
+      resizeObserver.current = new ResizeObserver(function () {
+        resetItemPosition();
+      });
+      resizeObserver.current.observe(root.current);
+      startTimer();
+    }
+    return function () {
+      pauseTimer();
+      if (resizeObserver.current) {
+        resizeObserver.current.disconnect();
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return {
+    items: items,
+    addItem: addItem,
+    removeItem: removeItem,
+    setContainerHeight: setContainerHeight,
+    root: root,
+    activeIndex: activeIndex,
+    arrowDisplay: arrowDisplay,
+    hasLabel: hasLabel,
+    hover: hover,
+    isCardType: isCardType,
+    isTransitioning: isTransitioning,
+    isVertical: isVertical,
+    containerStyle: containerStyle,
+    isItemsTwoLength: isItemsTwoLength,
+    handleButtonEnter: handleButtonEnter,
+    handleTransitionEnd: handleTransitionEnd,
+    handleButtonLeave: handleButtonLeave,
+    handleIndicatorClick: handleIndicatorClick,
+    handleMouseEnter: handleMouseEnter,
+    handleMouseLeave: handleMouseLeave,
+    setActiveItem: setActiveItem,
+    prev: prev,
+    next: next,
+    // PlaceholderItem,
+    isTwoLengthShow: isTwoLengthShow,
+    throttledArrowClick: throttle(throttledArrowClick, THROTTLE_TIME, {
+      trailing: true
+    }),
+    throttledIndicatorHover: throttle(throttledIndicatorHover, THROTTLE_TIME)
+  };
+};

package/dist/Carousel/hooks/useCarouselItem.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { CarouselItemProps, CarouselItemStates } from '../typings';
+export declare const useCarouselItem: (props: CarouselItemProps) => {
+    carouselItemRef: import("react").MutableRefObject<HTMLDivElement>;
+    state: CarouselItemStates;
+    setState: (_state: Partial<CarouselItemStates>) => void;
+    handleItemClick: () => void;
+};

package/dist/Carousel/hooks/useCarouselItem.js

@@ -0,0 +1,165 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import omit from 'lodash/omit';
+import { useCallback, useEffect, useId, useImperativeHandle, useReducer, useRef } from 'react';
+import { useCarouselContext } from "../CarouselContext";
+export var useCarouselItem = function useCarouselItem(props) {
+  var _useCarouselContext = useCarouselContext(),
+    isCardType = _useCarouselContext.isCardType,
+    loop = _useCarouselContext.loop,
+    isVertical = _useCarouselContext.isVertical,
+    cardScale = _useCarouselContext.cardScale,
+    root = _useCarouselContext.root,
+    items = _useCarouselContext.items,
+    addItem = _useCarouselContext.addItem,
+    removeItem = _useCarouselContext.removeItem,
+    setActiveItem = _useCarouselContext.setActiveItem,
+    setContainerHeight = _useCarouselContext.setContainerHeight;
+  var id = useId();
+  var carouselItemRef = useRef(null);
+  var ref = useRef(null);
+  var reducer = function reducer(state, action) {
+    switch (action.type) {
+      case 'setState':
+        return _objectSpread(_objectSpread({}, state), action.payload);
+      default:
+        return state;
+    }
+  };
+  var _useReducer = useReducer(reducer, {
+      ready: false,
+      hover: false,
+      translate: 0,
+      scale: 1,
+      animating: false,
+      active: false,
+      inStage: false
+    }),
+    _useReducer2 = _slicedToArray(_useReducer, 2),
+    state = _useReducer2[0],
+    dispatch = _useReducer2[1];
+  var setState = function setState(_state) {
+    return dispatch({
+      type: 'setState',
+      payload: _state
+    });
+  };
+  var calcCardTranslate = useCallback(function (index, activeIndex, inStage) {
+    var _root$current, _root$current2;
+    var parentWidth = isVertical ? ((_root$current = root.current) === null || _root$current === void 0 ? void 0 : _root$current.offsetHeight) || 0 : ((_root$current2 = root.current) === null || _root$current2 === void 0 ? void 0 : _root$current2.offsetWidth) || 0;
+    if (inStage) {
+      return parentWidth * ((2 - cardScale) * (index - activeIndex) + 1) / 4;
+    } else if (index < activeIndex) {
+      return -(1 + cardScale) * parentWidth / 4;
+    } else {
+      return (3 + cardScale) * parentWidth / 4;
+    }
+  }, [cardScale, isVertical, root]);
+  var calcTranslate = useCallback(function (index, activeIndex) {
+    var rootEl = root.current;
+    if (!rootEl) {
+      return 0;
+    }
+    var distance = (isVertical ? rootEl.offsetHeight : rootEl.offsetWidth) || 0;
+    return distance * (index - activeIndex);
+  }, [isVertical, root]);
+  var translateItem = useCallback(function (index, activeIndex, oldIndex) {
+    var _items$length;
+    var carouselItemLength = (_items$length = items.length) !== null && _items$length !== void 0 ? _items$length : Number.NaN;
+    var isActive = index === activeIndex;
+    if (!isCardType && oldIndex != undefined) {
+      setState({
+        animating: isActive || index === oldIndex
+      });
+    }
+    if (!isActive && carouselItemLength > 2 && loop) {
+      index = processIndex(index, activeIndex, carouselItemLength);
+    }
+    setState({
+      active: isActive
+    });
+    if (isCardType) {
+      var inStage = Math.round(Math.abs(index - activeIndex)) <= 1;
+      setState({
+        inStage: inStage,
+        translate: calcCardTranslate(index, activeIndex, inStage),
+        scale: isActive ? 1 : cardScale
+      });
+    } else {
+      setState({
+        translate: calcTranslate(index, activeIndex)
+      });
+    }
+    setState({
+      ready: true
+    });
+    if (isActive && carouselItemRef.current) {
+      setContainerHeight(carouselItemRef.current.offsetHeight);
+    }
+  }, [calcCardTranslate, calcTranslate, cardScale, isCardType, items, loop, setContainerHeight]);
+  var handleItemClick = useCallback(function () {
+    if (isCardType) {
+      var index = items.findIndex(function (_ref) {
+        var uid = _ref.uid;
+        return uid === id;
+      });
+      setActiveItem(index);
+    }
+  }, [id, isCardType, items, setActiveItem]);
+  useImperativeHandle(ref, function () {
+    return {
+      translateItem: translateItem
+    };
+  });
+  useEffect(function () {
+    addItem({
+      props: omit(props, 'children'),
+      states: state,
+      setState: setState,
+      uid: id,
+      translateItem: function translateItem() {
+        var _ref$current;
+        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+          args[_key] = arguments[_key];
+        }
+        return ref === null || ref === void 0 || (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.translateItem.apply(_ref$current, args);
+      }
+    });
+    return function () {
+      return removeItem(id);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return {
+    carouselItemRef: carouselItemRef,
+    state: state,
+    setState: setState,
+    handleItemClick: handleItemClick
+  };
+};
+var processIndex = function processIndex(index, activeIndex, length) {
+  var lastItemIndex = length - 1;
+  var prevItemIndex = activeIndex - 1;
+  var nextItemIndex = activeIndex + 1;
+  var halfItemIndex = length / 2;
+  if (activeIndex === 0 && index === lastItemIndex) {
+    return -1;
+  } else if (activeIndex === lastItemIndex && index === 0) {
+    return length;
+  } else if (index < prevItemIndex && activeIndex - index >= halfItemIndex) {
+    return length + 1;
+  } else if (index > nextItemIndex && index - activeIndex >= halfItemIndex) {
+    return -2;
+  }
+  return index;
+};

package/dist/Carousel/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Carousel } from './Carousel';
+export { default as CarouselItem } from './CarouselItem';
+export type { CarouselItemProps, CarouselProps, CarouselRef } from './typings';

package/dist/Carousel/index.js

@@ -0,0 +1,2 @@
+export { default as Carousel } from "./Carousel";
+export { default as CarouselItem } from "./CarouselItem";