New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@nest-ui/carousel
Advanced tools
@nest-ui/carousel - npm Package Compare versions
Comparing version 0.0.1-dev.1 to 0.0.1-dev.2
@@ -1,3 +0,2 @@ | ||
| /// <reference types="react" /> | ||
| declare const _default: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Pick<CarouselProps, string | number | symbol> & import("react").RefAttributes<CarouselRef>>>; | ||
| export default _default; | ||
| export { default as Carousel } from './dist/Carousel'; | ||
| export type { CarouselParams, CarouselRef, CarouselAppendFunc, CarouselProps } from './dist/type'; |
186
index.js
@@ -1,185 +0,1 @@ | ||
| 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(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } | ||
| function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } | ||
| import { Children, forwardRef, isValidElement, memo, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react'; | ||
| import useControlled from "./dist/hooks/useControlled"; | ||
| import noop from "./dist/utils/noop"; | ||
| import { useTheme } from '@emotion/react'; | ||
| import { initCarousel } from "./dist/utils/carousel"; | ||
| import { cssSlideGroup, cssSlideItem, cssSlider, cssWrapper } from "./dist/style"; | ||
| import { jsx as _jsx } from "@emotion/react/jsx-runtime"; | ||
| import { Fragment as _Fragment } from "@emotion/react/jsx-runtime"; | ||
| import { jsxs as _jsxs } from "@emotion/react/jsx-runtime"; | ||
| var Carousel = /*#__PURE__*/forwardRef(function (props, ref) { | ||
| var activeIndex = props.activeIndex, | ||
| _props$activeLength = props.activeLength, | ||
| _activeLength = _props$activeLength === void 0 ? 1 : _props$activeLength, | ||
| append = props.append, | ||
| _props$autoSlide = props.autoSlide, | ||
| autoSlide = _props$autoSlide === void 0 ? 0 : _props$autoSlide, | ||
| children = props.children, | ||
| _props$gutter = props.gutter, | ||
| gutter = _props$gutter === void 0 ? 0 : _props$gutter, | ||
| _props$slideStep = props.slideStep, | ||
| _slideStep = _props$slideStep === void 0 ? 1 : _props$slideStep, | ||
| _props$initialIndex = props.initialIndex, | ||
| initialIndex = _props$initialIndex === void 0 ? 0 : _props$initialIndex, | ||
| _props$outerGutter = props.outerGutter, | ||
| outerGutter = _props$outerGutter === void 0 ? 0 : _props$outerGutter, | ||
| _props$onChange = props.onChange, | ||
| onChange = _props$onChange === void 0 ? noop : _props$onChange; | ||
| var _useTheme = useTheme(), | ||
| _breakpoints = _useTheme['core-breakpoints']; | ||
| var arrActiveLength = [_activeLength].flat(); | ||
| var arrSlideStep = [_slideStep].flat(); | ||
| var _useControlled = useControlled(activeIndex, initialIndex), | ||
| _useControlled2 = _slicedToArray(_useControlled, 2), | ||
| currIndex = _useControlled2[0], | ||
| setCurrIndex = _useControlled2[1]; | ||
| var slideTo = useCallback(function (value) { | ||
| setCurrIndex(value); | ||
| onChange(value); | ||
| }, [setCurrIndex, onChange]); | ||
| var _useState = useState(0), | ||
| _useState2 = _slicedToArray(_useState, 2), | ||
| breakpointIdx = _useState2[0], | ||
| setBreakpointIdx = _useState2[1]; | ||
| useEffect(function () { | ||
| if (arrSlideStep.length === 1 && arrActiveLength.length === 1) return; | ||
| var debounce; | ||
| var breakpoints = _breakpoints || [0]; | ||
| var calcCurrBreakpoint = function calcCurrBreakpoint() { | ||
| var currScreen = window.innerWidth; | ||
| for (var i = breakpoints.length - 1; i >= 0; i--) { | ||
| var breakpoint = breakpoints[i]; | ||
| if (currScreen >= breakpoint) { | ||
| setBreakpointIdx(i); | ||
| break; | ||
| } | ||
| } | ||
| }; | ||
| calcCurrBreakpoint(); | ||
| var handleResize = function handleResize() { | ||
| clearTimeout(debounce); | ||
| debounce = setTimeout(calcCurrBreakpoint, 100); | ||
| }; | ||
| window.addEventListener('resize', handleResize); | ||
| return function () { | ||
| clearTimeout(debounce); | ||
| window.removeEventListener('resize', handleResize); | ||
| }; | ||
| }, [_breakpoints, arrActiveLength.length, arrSlideStep.length]); | ||
| var activeLength = 0; | ||
| var slideStep = 0; | ||
| for (var i = breakpointIdx; i >= 0; i--) { | ||
| if (activeLength && slideStep) break; | ||
| activeLength = activeLength || arrActiveLength[i]; | ||
| slideStep = slideStep || arrSlideStep[i]; | ||
| } | ||
| var totalIndex = 0; | ||
| var slides = Children.map(children, function (child) { | ||
| if ( /*#__PURE__*/isValidElement(child)) { | ||
| totalIndex += 1; | ||
| return _jsx("div", { | ||
| css: cssSlideItem(gutter), | ||
| children: child | ||
| }); | ||
| } | ||
| return null; | ||
| }); // navigation target | ||
| var firstIndex = 0; | ||
| var lastIndex = totalIndex - activeLength; | ||
| var prevIndex = Math.max(currIndex - slideStep, firstIndex); | ||
| var nextIndex = Math.min(currIndex + slideStep, lastIndex); | ||
| var autoIndex = currIndex === lastIndex ? firstIndex : nextIndex; // ref forwarding | ||
| var wrapper = useRef(null); | ||
| useImperativeHandle(ref, function () { | ||
| return { | ||
| activeLength: activeLength, | ||
| currIndex: currIndex, | ||
| nextIndex: nextIndex, | ||
| prevIndex: prevIndex, | ||
| slideStep: slideStep, | ||
| totalIndex: totalIndex, | ||
| slideTo: slideTo, | ||
| element: wrapper.current | ||
| }; | ||
| }, [activeLength, currIndex, nextIndex, prevIndex, slideStep, totalIndex, slideTo]); // re-adjust currIndex after screen resize (for last slide) | ||
| useEffect(function () { | ||
| if (currIndex > nextIndex) slideTo(nextIndex); | ||
| }, [currIndex, nextIndex, slideTo]); | ||
| var slideGroup = useRef(null); | ||
| useEffect(function () { | ||
| var wrapperDOM = wrapper.current; | ||
| var slideGroupDOM = slideGroup.current; | ||
| if (wrapperDOM && slideGroupDOM) { | ||
| var carousel = initCarousel({ | ||
| autoIndex: autoIndex, | ||
| autoSlide: autoSlide, | ||
| currIndex: currIndex, | ||
| prevIndex: prevIndex, | ||
| nextIndex: nextIndex, | ||
| slideGroupDOM: slideGroupDOM, | ||
| wrapperDOM: wrapperDOM, | ||
| slideTo: slideTo | ||
| }); | ||
| return carousel.destroy; | ||
| } | ||
| return; | ||
| }, [autoSlide, currIndex, autoIndex, prevIndex, nextIndex, slideTo]); | ||
| return _jsxs(_Fragment, { | ||
| children: [_jsx("div", { | ||
| ref: wrapper, | ||
| css: cssWrapper(outerGutter), | ||
| children: _jsx("div", { | ||
| css: cssSlider(gutter), | ||
| children: _jsx("div", { | ||
| ref: slideGroup, | ||
| css: cssSlideGroup(arrActiveLength), | ||
| style: { | ||
| transform: "translate3d(".concat(-currIndex * 100, "%,0,0)") | ||
| }, | ||
| children: slides | ||
| }) | ||
| }) | ||
| }), typeof append === 'function' ? append({ | ||
| activeLength: activeLength, | ||
| currIndex: currIndex, | ||
| nextIndex: nextIndex, | ||
| prevIndex: prevIndex, | ||
| slideStep: slideStep, | ||
| totalIndex: totalIndex, | ||
| slideTo: slideTo | ||
| }) : append] | ||
| }); | ||
| }); | ||
| export default /*#__PURE__*/memo(Carousel); | ||
| export { default as Carousel } from "./dist/Carousel"; |
| { | ||
| "name": "@nest-ui/carousel", | ||
| "version": "0.0.1-dev.1", | ||
| "version": "0.0.1-dev.2", | ||
| "description": "NEST Carousel", | ||
@@ -9,3 +9,3 @@ "license": "ISC", | ||
| "scripts": { | ||
| "build": "sh ../../scripts/build/prebuild-single.sh", | ||
| "build": "sh ../../scripts/build/prebuild-single.sh --carousel", | ||
| "build:clean": "pnpm run clean && pnpm run build", | ||
@@ -12,0 +12,0 @@ "clean": "rm -rf dist index.js index.d.ts style.js style.d.ts type.d.ts", |
No alert changes
Worsened metrics
- Total package byte prevSize
- decreased by-10.04%
26558
- Lines of code
- decreased by-18.32%
468
No dependency changes