A Generic, extendible Carousel UI component for React using Material UI. 

A Generic, extendible Carousel UI component for React using Material UI

wintjen

react-material-ui-carousel-custom

var __assign = (this && this.__assign) || function () {

    __assign = Object.assign || function(t) {

        for (var s, i = 1, n = arguments.length; i < n; i++) {

            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))

    return __assign.apply(this, arguments);

var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {

    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });

var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {

    Object.defineProperty(o, "default", { enumerable: true, value: v });

var __importStar = (this && this.__importStar) || function (mod) {

    if (mod && mod.__esModule) return mod;

    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);

Object.defineProperty(exports, "__esModule", { value: true });

var CarouselItem_1 = require("./CarouselItem");

var Indicators_1 = require("./Indicators");

var react_1 = __importStar(require("react"));

var material_1 = require("@mui/material");

    /** Used to set carousel's height. It is being set by the CarouselItems */

    var _b = (0, react_1.useState)(), childrenHeight = _b[0], setChildrenHeight = _b[1];

    var _c = (0, react_1.useState)(false), paused = _c[0], setPaused = _c[1];

    var sanitizedProps = (0, util_1.sanitizeProps)(props);

        var index = sanitizedProps.index, changeOnFirstRender = sanitizedProps.changeOnFirstRender;

        setNext(index, true, changeOnFirstRender);

    (0, util_1.useInterval)(function () {

        var autoPlay = sanitizedProps.autoPlay;

    var changeChild = (0, react_1.useCallback)(function (e) {

            var last = Array.isArray(children) ? children.length - 1 : 0;

            var nextActive = state.active - 1 < 0 ? (cycleNavigation ? last : state.active) : state.active - 1;

        else if (e.key === "ArrowRight") {

            var nextActive = state.active + 1 > last ? (cycleNavigation ? 0 : state.active) : state.active + 1;

        document.addEventListener("keydown", changeChild);

            document.removeEventListener("keydown", changeChild);

        var children = sanitizedProps.children, cycleNavigation = sanitizedProps.cycleNavigation;

        var last = Array.isArray(children) ? children.length - 1 : 0;

        var nextActive = state.active + 1 > last ? (cycleNavigation ? 0 : state.active) : state.active + 1;

        var nextActive = state.active - 1 < 0 ? (cycleNavigation ? last : state.active) : state.active - 1;

    var setNext = function (index, isNext, runCallbacks) {

        if (runCallbacks === void 0) { runCallbacks = true; }

        var onChange = sanitizedProps.onChange, children = sanitizedProps.children, strictIndexing = sanitizedProps.strictIndexing;

            if (strictIndexing && index > children.length - 1)

                index = children.length - 1;

                        react_1.default.createElement(material_1.Typography, { sx: {

                                display: navButtonsAlwaysInvisible ? 'inherit' : 'none'

                                display: navButtonsAlwaysVisible ? 'block' : 'none'

                                position: 'absolute',

                                marginTop: '30px',

                                width: '100px',

                                right: '-10px'

                            } }, "Next Card"))),

        !navButtonsAlwaysInvisible && showButton(false) &&

            react_1.default.createElement(Styled_1.StyledButtonWrapper, __assign({ "$next": false, "$prev": true, "$fullHeightHover": fullHeightHover }, navButtonsWrapperProps), NavButton !== undefined ?

                NavButton(__assign({ onClick: prev, next: false, prev: true }, navButtonsProps))

                    react_1.default.createElement(react_1.default.Fragment, null,

                        react_1.default.createElement(Styled_1.StyledIconButton, __assign({ "$alwaysVisible": navButtonsAlwaysVisible, "$fullHeightHover": fullHeightHover, onClick: prev, "aria-label": "Previous" }, navButtonsProps), PrevIcon),

                                width: '135px',

                                left: '10px'

                            } }, "Previous Card"))),

            react_1.default.createElement(Indicators_1.Indicators, { length: Array.isArray(children) ? children.length : 0, active: state.active, press: setNext, indicatorContainerProps: indicatorContainerProps, indicatorIconButtonProps: indicatorIconButtonProps, activeIndicatorIconButtonProps: activeIndicatorIconButtonProps, IndicatorIcon: IndicatorIcon }) : null));

    "name": "react-material-ui-carousel-custom",

    "description": "A Generic, extendible Carousel UI component for React using Material UI",

    "homepage": "https://github.com/Wintjen/react-material-ui-carousel-custom",

        "url": "https://github.com/Wintjen/react-material-ui-carousel-custom"

        "build": "npx rimraf dist && npm run build:cjs",

        "build:cjs": "tsc --module commonjs --outDir dist",

        "build_old": "NODE_ENV=production && npx rimraf dist && npx mkdirp dist && npx babel ./src --out-dir dist --copy-files"

        "react-material-ui-carousel": "git+https://github.com/Wintjen/react-material-ui-carousel-custom"

        "babel-preset-stage-2": "^6.24.1",

        "react-dom": "^17.0.2 || ^18.0.0"

		{
		"name": "react-material-ui-carousel-custom",
		"version": "1.0.10",
		"version": "1.0.11",
		"license": "MIT",
		@@ -5,0 +5,0 @@ "description": "A Generic, extendible Carousel UI component for React using Material UI",

		@@ -147,3 +147,3 @@ "use strict";
		react_1.default.createElement(material_1.Typography, { sx: {
		display: navButtonsAlwaysInvisible ? 'inherit' : 'none'
		display: navButtonsAlwaysVisible ? 'block' : 'none'
		}, style: {
		@@ -162,3 +162,3 @@ position: 'absolute',
		react_1.default.createElement(material_1.Typography, { sx: {
		display: navButtonsAlwaysInvisible ? 'inherit' : 'none'
		display: navButtonsAlwaysVisible ? 'block' : 'none'
		}, style: {
		@@ -165,0 +165,0 @@ position: 'absolute',

Worsened metrics