@alfalab/core-components-page-indicator 1.0.0

package/moderncssm/components/bullet/Component.js

@@ -0,0 +1,40 @@
+import React, { useMemo, createRef } from 'react';
+import { CSSTransition } from 'react-transition-group';
+import cn from 'classnames';
+import { calcParams } from './utils/utils.js';
+import defaultColors from './default.module.css';
+import styles from './index.module.css';
+import invertedColors from './inverted.module.css';
+import staticColors from './static.module.css';
+import staticInvertedColors from './static-inverted.module.css';
+
+const colorsStyle = {
+    inverted: invertedColors,
+    default: defaultColors,
+    static: staticColors,
+    'static-inverted': staticInvertedColors,
+};
+const transitionClassess = {};
+const PageIndicatorBullet = ({ elements: count = 10, activeElement: activeElementIndex, size = 8, gap = 8, colors = 'default', }) => {
+    const refs = useMemo(() => Array.from({ length: count }, (createRef)), [count]);
+    const [height, width, offset, elementSize, firstVisibleElementIndex, lastVisibleElementIndex] = useMemo(() => calcParams(size, gap, activeElementIndex, count), [activeElementIndex, count, gap, size]);
+    return (React.createElement("div", { className: cn(styles.pageIndicator, styles.bullet), style: { height, width } },
+        React.createElement("ol", { className: styles.elementsList, style: { gap, transform: `translate(${offset}px)` } }, refs.map((ref, index) => {
+            const sizeOfElement = elementSize(index);
+            const isActive = activeElementIndex === index;
+            const isVisible = firstVisibleElementIndex <= index && index <= lastVisibleElementIndex;
+            const addListTransitionEndListener = (done) => {
+                const parentElement = ref.current?.parentElement;
+                parentElement?.addEventListener('transitionend', done, { once: true });
+            };
+            return (React.createElement(CSSTransition
+            // eslint-disable-next-line react/no-array-index-key
+            , { 
+                // eslint-disable-next-line react/no-array-index-key
+                key: index, nodeRef: ref, addEndListener: addListTransitionEndListener, in: isVisible, 
+                // passed empty object so any classes aren't added
+                classNames: transitionClassess }, (status) => (React.createElement("li", { ref: ref, "data-index": index, className: cn(styles.element, colorsStyle[colors].element, { [colorsStyle[colors].active]: isActive }, styles[status]), style: { height: sizeOfElement, width: sizeOfElement } }))));
+        }))));
+};
+
+export { PageIndicatorBullet };

package/moderncssm/components/bullet/default.module.css

@@ -0,0 +1,22 @@
+/* */
+
+:root {
+
+    /* default */
+    --page-indicator-color: var(--color-light-neutral-translucent-300);
+    --page-indicator-active-color: var(--color-light-neutral-translucent-1300);
+
+    /* inverted */
+
+    /* static */
+
+    /* static-inverted */
+}
+
+.element {
+    background: var(--page-indicator-color)
+}
+
+.element.active {
+        background: var(--page-indicator-active-color);
+    }

package/moderncssm/components/bullet/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/moderncssm/components/bullet/index.js

@@ -0,0 +1 @@
+export { PageIndicatorBullet } from './Component.js';

package/moderncssm/components/bullet/index.module.css

@@ -0,0 +1,56 @@
+/* */
+
+:root {
+    --page-indicator-animation-duration: 0.2s;
+    --page-indicator-animation-timing-function: ease-in-out;
+
+    /* default */
+
+    /* inverted */
+
+    /* static */
+
+    /* static-inverted */
+}
+
+.pageIndicator.bullet {
+        overflow: hidden;
+    }
+
+.elementsList {
+    margin: 0;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    will-change: transform;
+    transition: transform var(--page-indicator-animation-duration)
+        var(--page-indicator-animation-timing-function);
+}
+
+.element {
+    list-style-type: none;
+    flex-shrink: 0;
+    transition: background var(--page-indicator-animation-duration)
+        var(--page-indicator-animation-timing-function);
+    border-radius: var(--border-radius-circle)
+}
+
+.element.entering {
+        opacity: 0;
+    }
+
+.element.entered {
+        opacity: 1;
+        transition: background var(--page-indicator-animation-duration)
+                var(--page-indicator-animation-timing-function),
+            opacity var(--page-indicator-animation-duration)
+                var(--page-indicator-animation-timing-function);
+    }
+
+.element.exiting {
+        opacity: 0;
+    }
+
+.element.exited {
+        opacity: 0;
+    }

package/moderncssm/components/bullet/inverted.module.css

@@ -0,0 +1,22 @@
+/* */
+
+:root {
+
+    /* default */
+
+    /* inverted */
+    --page-indicator-color-inverted: var(--color-light-neutral-translucent-300-inverted);
+    --page-indicator-active-color-inverted: var(--color-light-neutral-translucent-1300-inverted);
+
+    /* static */
+
+    /* static-inverted */
+}
+
+.element {
+    background: var(--page-indicator-color-inverted)
+}
+
+.element.active {
+        background: var(--page-indicator-active-color-inverted);
+    }

package/moderncssm/components/bullet/static-inverted.module.css

@@ -0,0 +1,22 @@
+/* */
+
+:root {
+
+    /* default */
+
+    /* inverted */
+
+    /* static */
+
+    /* static-inverted */
+    --page-indicator-color-static-inverted: var(--color-static-neutral-translucent-300-inverted);
+    --page-indicator-active-color-static-inverted: var(--color-static-neutral-1300-inverted);
+}
+
+.element {
+    background: var(--page-indicator-color-static-inverted)
+}
+
+.element.active {
+        background: var(--page-indicator-active-color-static-inverted);
+    }

package/moderncssm/components/bullet/static.module.css

@@ -0,0 +1,22 @@
+/* */
+
+:root {
+
+    /* default */
+
+    /* inverted */
+
+    /* static */
+    --page-indicator-color-static: var(--color-static-neutral-translucent-300);
+    --page-indicator-active-color-static: var(--color-static-neutral-1300);
+
+    /* static-inverted */
+}
+
+.element {
+    background: var(--page-indicator-color-static)
+}
+
+.element.active {
+        background: var(--page-indicator-active-color-static);
+    }

package/moderncssm/components/bullet/utils/index.d.ts

@@ -0,0 +1 @@
+export * from "./utils";

package/moderncssm/components/bullet/utils/index.js

@@ -0,0 +1 @@
+export { calcParams } from './utils.js';

package/moderncssm/components/bullet/utils/utils.d.ts

@@ -0,0 +1,9 @@
+declare function calcParams(size: number, gap: number, activeElementIndex: number, elementsCount: number): [
+    height: number,
+    width: number,
+    offset: number,
+    elementSize: (index: number) => number,
+    firstVisibleElementIndex: number,
+    lastVisibleElementIndex: number
+];
+export { calcParams };

package/moderncssm/components/bullet/utils/utils.js

@@ -0,0 +1,114 @@
+const RENDER_ELEMENTS_COUNT = 5;
+function calcParams(size, gap, activeElementIndex, elementsCount) {
+    const renderElementsCount = Math.min(elementsCount, RENDER_ELEMENTS_COUNT);
+    const firstIndex = 0;
+    const lastIndex = elementsCount - 1;
+    function findFirstVisibleElementIndex() {
+        const middle = (renderElementsCount - 1) / 2;
+        let leadingOffset;
+        let tailingOffset;
+        if (middle % 1 === 0) {
+            leadingOffset = middle;
+            tailingOffset = middle;
+        }
+        else {
+            leadingOffset = Math.floor(middle);
+            tailingOffset = Math.ceil(middle);
+        }
+        // rebalance leadingOffset
+        const maybeFirstVisibleElementIndex = activeElementIndex - leadingOffset;
+        if (maybeFirstVisibleElementIndex < firstIndex) {
+            leadingOffset -= firstIndex - maybeFirstVisibleElementIndex;
+        }
+        const maybeLastActiveElementIndex = activeElementIndex + tailingOffset;
+        if (maybeLastActiveElementIndex > lastIndex) {
+            leadingOffset += maybeLastActiveElementIndex - lastIndex;
+        }
+        return activeElementIndex - leadingOffset;
+    }
+    const firstVisibleElementIndex = findFirstVisibleElementIndex();
+    const lastVisibleElementIndex = renderElementsCount + firstVisibleElementIndex - 1;
+    const largeSize = size;
+    const middleSize = 0.75 * size;
+    const smallSize = 0.5 * size;
+    // eslint-disable-next-line complexity
+    function computeElementSize(_, index) {
+        if (index < firstVisibleElementIndex || index > lastVisibleElementIndex) {
+            return smallSize;
+        }
+        if (elementsCount === RENDER_ELEMENTS_COUNT + 1 /* totalCount === 6 */) {
+            if ((index === firstVisibleElementIndex &&
+                !(firstVisibleElementIndex === firstIndex)) ||
+                (index === lastVisibleElementIndex && !(lastVisibleElementIndex === lastIndex))) {
+                return middleSize;
+            }
+        }
+        else if (elementsCount > RENDER_ELEMENTS_COUNT + 1 /* totalCount > 6 */) {
+            if (firstVisibleElementIndex === firstIndex) {
+                if (!(lastVisibleElementIndex === lastIndex)) {
+                    if (index === lastVisibleElementIndex) {
+                        if (activeElementIndex === lastVisibleElementIndex - 1) {
+                            return middleSize;
+                        }
+                        return smallSize;
+                    }
+                    if (index === lastVisibleElementIndex - 1) {
+                        return middleSize;
+                    }
+                }
+            }
+            if (lastVisibleElementIndex === lastIndex) {
+                if (!(firstVisibleElementIndex === firstIndex)) {
+                    if (index === firstVisibleElementIndex) {
+                        if (activeElementIndex === firstVisibleElementIndex + 1) {
+                            return middleSize;
+                        }
+                        return smallSize;
+                    }
+                    if (index === firstVisibleElementIndex + 1) {
+                        return middleSize;
+                    }
+                }
+            }
+            if ((index === firstVisibleElementIndex &&
+                !(firstVisibleElementIndex === firstIndex)) ||
+                (index === lastVisibleElementIndex && !(lastVisibleElementIndex === lastIndex))) {
+                return middleSize;
+            }
+        }
+        return largeSize;
+    }
+    const elementSizes = Array.from({ length: elementsCount }, computeElementSize);
+    const width = renderElementsCount * (largeSize + gap) - gap;
+    function actualWidth() {
+        return elementSizes
+            .slice(firstVisibleElementIndex, lastVisibleElementIndex + 1)
+            .map((elementSize, index, array) => index === array.length - 1 ? elementSize : elementSize + gap)
+            .reduce((a, b) => a + b, 0);
+    }
+    function offset() {
+        const extraOffset = firstVisibleElementIndex === firstIndex
+            ? 0
+            : (width - actualWidth()) / (lastVisibleElementIndex === lastIndex ? 1 : 2);
+        return (extraOffset -
+            elementSizes
+                .slice(firstIndex, firstVisibleElementIndex)
+                .map((elementSize) => elementSize + gap)
+                .reduce((a, b) => a + b, 0));
+    }
+    function height() {
+        return Math.max(size, largeSize, middleSize, smallSize);
+    }
+    return [
+        height(),
+        width,
+        offset(),
+        function elementSize(index) {
+            return elementSizes[index];
+        },
+        firstVisibleElementIndex,
+        lastVisibleElementIndex,
+    ];
+}
+
+export { calcParams };

package/moderncssm/components/dynamic/Component.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import React from 'react';
+import { PageIndicatorDynamicProps } from "../../types";
+declare const PageIndicatorDynamic: React.FC<PageIndicatorDynamicProps>;
+export { PageIndicatorDynamic };

package/moderncssm/components/dynamic/Component.js

@@ -0,0 +1,73 @@
+import React, { useState, useEffect } from 'react';
+import cn from 'classnames';
+import { hasOwnProperty, isNonNullable, isFn, noop, isNullable } from '@alfalab/core-components-shared/moderncssm';
+import defaultColors from './default.module.css';
+import styles from './index.module.css';
+import invertedColors from './inverted.module.css';
+import staticColors from './static.module.css';
+import staticInvertedColors from './static-inverted.module.css';
+
+const colorsStyle = {
+    inverted: invertedColors,
+    default: defaultColors,
+    static: staticColors,
+    'static-inverted': staticInvertedColors,
+};
+const FULL_PROGRESS = 100;
+const PageIndicatorDynamic = (props) => {
+    const { size: height = 8, gap = 8, activeElementWidth = height * 7, elements: count = 10, activeElement: indexFromProps, onActiveElementChange, defaultActiveElement: defaultIndex = 0, active = true, duration: durationFromProps = 3000, cycle = false, colors = 'default', } = props;
+    const [activeIndex, setActiveIndex] = useState(indexFromProps ?? defaultIndex);
+    const [progress, setProgress] = useState(0);
+    const inProgress = progress < FULL_PROGRESS;
+    const activeIndexInProps = hasOwnProperty(props, 'activeElement');
+    let duration;
+    if (active && isNonNullable(activeIndex) && inProgress) {
+        duration = isFn(durationFromProps) ? durationFromProps(activeIndex) : durationFromProps;
+    }
+    else {
+        duration = -1;
+    }
+    // getDerivedStateFromProps
+    if (activeIndexInProps && !(activeIndex === indexFromProps)) {
+        setActiveIndex(indexFromProps);
+        setProgress(0);
+    }
+    useEffect(() => {
+        if (duration === -1) {
+            return noop;
+        }
+        const interval = duration / FULL_PROGRESS;
+        const timer = setInterval(() => setProgress((prevProgress) => Math.min(prevProgress + 1, FULL_PROGRESS)), interval);
+        return () => clearInterval(timer);
+    }, [duration]);
+    useEffect(() => {
+        const isLast = activeIndex === count - 1;
+        if (inProgress || isNullable(activeIndex) || (isLast && !cycle)) {
+            return;
+        }
+        const nextActiveIndex = isLast && cycle ? 0 : activeIndex + 1;
+        onActiveElementChange?.(nextActiveIndex);
+        if (activeIndexInProps) {
+            return;
+        }
+        setActiveIndex(nextActiveIndex);
+        setProgress(0);
+    }, [activeIndex, activeIndexInProps, count, cycle, inProgress, onActiveElementChange]);
+    return (React.createElement("ol", { className: styles.pageIndicator, style: { height, gap } }, Array.from({ length: count }, (_, index) => {
+        const isActive = index === activeIndex;
+        const style = {
+            width: isActive ? activeElementWidth : height,
+            borderRadius: height / 2,
+        };
+        const progressStyle = isActive
+            ? { transform: `translateX(${progress - FULL_PROGRESS}%)` }
+            : undefined;
+        return (React.createElement("li", { key: index, style: style, className: cn(styles.element, colorsStyle[colors].element, {
+                [styles.active]: isActive,
+                [colorsStyle[colors].active]: isActive,
+            }) },
+            React.createElement("div", { style: progressStyle, className: cn(styles.progress, colorsStyle[colors].progress) })));
+    })));
+};
+
+export { PageIndicatorDynamic };

package/moderncssm/components/dynamic/default.module.css

@@ -0,0 +1,24 @@
+/* */
+
+:root {
+
+    /* default */
+    --page-indicator-color: var(--color-light-neutral-translucent-300);
+    --page-indicator-active-color: var(--color-light-neutral-translucent-1300);
+
+    /* inverted */
+
+    /* static */
+
+    /* static-inverted */
+}
+
+.element {
+    background: var(--page-indicator-color)
+}
+
+.element.active {
+        .progress {
+            background: var(--page-indicator-active-color);
+        }
+    }

package/moderncssm/components/dynamic/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/moderncssm/components/dynamic/index.js

@@ -0,0 +1 @@
+export { PageIndicatorDynamic } from './Component.js';

package/moderncssm/components/dynamic/index.module.css

@@ -0,0 +1,40 @@
+/* */
+
+:root {
+    --page-indicator-animation-duration: 0.2s;
+
+    /* default */
+
+    /* inverted */
+
+    /* static */
+
+    /* static-inverted */
+}
+
+.pageIndicator {
+    margin: 0;
+    padding: 0;
+    display: flex;
+}
+
+.element {
+    list-style-type: none;
+    overflow: hidden;
+    transition: width var(--page-indicator-animation-duration) linear
+}
+
+.element:not(.active) {
+        .progress {
+            display: none;
+        }
+    }
+
+.element {
+
+    .progress {
+        width: 100%;
+        height: 100%;
+        will-change: transform;
+    }
+}

package/moderncssm/components/dynamic/inverted.module.css

@@ -0,0 +1,24 @@
+/* */
+
+:root {
+
+    /* default */
+
+    /* inverted */
+    --page-indicator-color-inverted: var(--color-light-neutral-translucent-300-inverted);
+    --page-indicator-active-color-inverted: var(--color-light-neutral-translucent-1300-inverted);
+
+    /* static */
+
+    /* static-inverted */
+}
+
+.element {
+    background: var(--page-indicator-color-inverted)
+}
+
+.element.active {
+        .progress {
+            background: var(--page-indicator-active-color-inverted);
+        }
+    }

package/moderncssm/components/dynamic/static-inverted.module.css

@@ -0,0 +1,24 @@
+/* */
+
+:root {
+
+    /* default */
+
+    /* inverted */
+
+    /* static */
+
+    /* static-inverted */
+    --page-indicator-color-static-inverted: var(--color-static-neutral-translucent-300-inverted);
+    --page-indicator-active-color-static-inverted: var(--color-static-neutral-1300-inverted);
+}
+
+.element {
+    background: var(--page-indicator-color-static-inverted)
+}
+
+.element.active {
+        .progress {
+            background: var(--page-indicator-active-color-static-inverted);
+        }
+    }

package/moderncssm/components/dynamic/static.module.css

@@ -0,0 +1,24 @@
+/* */
+
+:root {
+
+    /* default */
+
+    /* inverted */
+
+    /* static */
+    --page-indicator-color-static: var(--color-static-neutral-translucent-300);
+    --page-indicator-active-color-static: var(--color-static-neutral-1300);
+
+    /* static-inverted */
+}
+
+.element {
+    background: var(--page-indicator-color-static)
+}
+
+.element.active {
+        .progress {
+            background: var(--page-indicator-active-color-static);
+        }
+    }

package/moderncssm/components/runner/Component.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import React from 'react';
+import { PageIndicatorRunnerProps } from "../../types";
+declare const PageIndicatorRunner: React.FC<PageIndicatorRunnerProps>;
+export { PageIndicatorRunner };

package/moderncssm/components/runner/Component.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import cn from 'classnames';
+import defaultColors from './default.module.css';
+import styles from './index.module.css';
+import invertedColors from './inverted.module.css';
+import staticColors from './static.module.css';
+import staticInvertedColors from './static-inverted.module.css';
+
+const colorsStyle = {
+    inverted: invertedColors,
+    default: defaultColors,
+    static: staticColors,
+    'static-inverted': staticInvertedColors,
+};
+const PageIndicatorRunner = ({ activeElement, elements: count = 10, size = 4, colors = 'default', }) => (React.createElement("div", { className: cn(styles.pageIndicator, colorsStyle[colors].pageIndicator), style: { height: size, borderRadius: size / 2 } },
+    React.createElement("div", { style: {
+            transform: `translate(${activeElement * 100}%, 0)`,
+            height: size,
+            width: `${100 / count}%`,
+            borderRadius: size / 2,
+        }, className: cn(styles.element, colorsStyle[colors].element) })));
+
+export { PageIndicatorRunner };

package/moderncssm/components/runner/default.module.css

@@ -0,0 +1,22 @@
+/* */
+
+:root {
+
+    /* default */
+    --page-indicator-color: var(--color-light-neutral-translucent-300);
+    --page-indicator-active-color: var(--color-light-neutral-translucent-1300);
+
+    /* inverted */
+
+    /* static */
+
+    /* static-inverted */
+}
+
+.pageIndicator {
+    background: var(--page-indicator-color);
+}
+
+.element {
+    background: var(--page-indicator-active-color);
+}

package/moderncssm/components/runner/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/moderncssm/components/runner/index.js

@@ -0,0 +1 @@
+export { PageIndicatorRunner } from './Component.js';

package/moderncssm/components/runner/index.module.css

@@ -0,0 +1,18 @@
+/* */
+
+:root {
+    --page-indicator-animation-duration: 0.2s;
+
+    /* default */
+
+    /* inverted */
+
+    /* static */
+
+    /* static-inverted */
+}
+
+.element {
+    transition: transform var(--page-indicator-animation-duration) linear;
+    will-change: transition;
+}

package/moderncssm/components/runner/inverted.module.css

@@ -0,0 +1,22 @@
+/* */
+
+:root {
+
+    /* default */
+
+    /* inverted */
+    --page-indicator-color-inverted: var(--color-light-neutral-translucent-300-inverted);
+    --page-indicator-active-color-inverted: var(--color-light-neutral-translucent-1300-inverted);
+
+    /* static */
+
+    /* static-inverted */
+}
+
+.pageIndicator {
+    background: var(--page-indicator-color-inverted);
+}
+
+.element {
+    background: var(--page-indicator-active-color-inverted);
+}