@navinc/base-react-components/dist/column-carousel.js

Nav's Pattern Library

var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import { jsx as _jsx } from "react/jsx-runtime";
import { createContext, useCallback, useContext, useEffect, useState } from 'react';
import styled from 'styled-components';
const ColumnCarouselContainer = styled.div.withConfig({ displayName: "brc-sc-ColumnCarouselContainer", componentId: "brc-sc-ye736j" }) `
  display: flex;
  flex-direction: row;

  & > * {
    flex: 1;
  }
`;
const ColumnCarouselContext = createContext({
    /** @private */
    currentColumnIndex: 0,
    /** @private */
    setCurrentColumnIndex: (() => { }),
    cycle: () => { },
    goForward: () => { },
    goBackward: () => { },
    goToIndex: (_index) => { },
    activeColumns: 0,
    totalColumns: 0,
    canCycle: false,
});
export const ColumnCarouselProvider = ({ totalColumns, activeColumns = totalColumns, children, }) => {
    const [currentColumnIndex, setCurrentColumnIndex] = useState(0);
    const canCycle = activeColumns < totalColumns;
    const cycle = useCallback(() => {
        if (canCycle) {
            setCurrentColumnIndex((i) => (i + 1) % totalColumns);
        }
    }, [canCycle, totalColumns]);
    const goBackward = useCallback(() => {
        if (canCycle) {
            setCurrentColumnIndex((i) => (i - 1 + totalColumns) % totalColumns);
        }
    }, [canCycle, totalColumns]);
    const goToIndex = useCallback((index) => {
        if (canCycle) {
            setCurrentColumnIndex(index % totalColumns);
        }
    }, [canCycle, totalColumns]);
    const providerValue = {
        currentColumnIndex,
        setCurrentColumnIndex,
        cycle,
        goForward: cycle,
        goBackward,
        goToIndex,
        activeColumns,
        totalColumns,
        canCycle,
    };
    return _jsx(ColumnCarouselContext.Provider, { value: providerValue, children: children });
};
export const useColumnCarouselContext = () => {
    return useContext(ColumnCarouselContext);
};
/**
 * ColumnCarousel is used to display a subset of children at a time, cycling through them.  This is different from a
 * typical carousel in that there can be multiple carousels on the page each synced to the same column index.
 * Essentially this is multiple carousels controlled by a single provider.
 */
export const ColumnCarousel = (_a) => {
    var { children } = _a, props = __rest(_a, ["children"]);
    const { currentColumnIndex, activeColumns, totalColumns } = useColumnCarouselContext();
    const childrenArray = Array.isArray(children) ? children : [children];
    useEffect(() => {
        if (totalColumns !== childrenArray.length) {
            console.warn(`ColumnCarousel: ColumnCarouselProvider's totalColumns (${totalColumns}) does not match number of children (${childrenArray.length}).  This will cause issues when cycling.`);
        }
    }, [totalColumns, childrenArray.length]);
    return (_jsx(ColumnCarouselContainer, Object.assign({}, props, { children: [...childrenArray.slice(currentColumnIndex), ...childrenArray.slice(0, currentColumnIndex)].slice(0, activeColumns) })));
};
//# sourceMappingURL=column-carousel.js.map