@alfalab/core-components-page-indicator 1.0.0

package/src/components/bullet/utils/utils.ts

@@ -0,0 +1,153 @@
+const RENDER_ELEMENTS_COUNT = 5;
+
+export function calcParams(
+    size: number,
+    gap: number,
+    activeElementIndex: number,
+    elementsCount: number,
+): [
+    height: number,
+    width: number,
+    offset: number,
+    elementSize: (index: number) => number,
+    firstVisibleElementIndex: number,
+    lastVisibleElementIndex: number,
+] {
+    const renderElementsCount = Math.min(elementsCount, RENDER_ELEMENTS_COUNT);
+    const firstIndex = 0;
+    const lastIndex = elementsCount - 1;
+
+    function findFirstVisibleElementIndex(): number {
+        const middle = (renderElementsCount - 1) / 2;
+        let leadingOffset: number;
+        let tailingOffset: number;
+
+        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(_: unknown, index: number): number {
+        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: number) {
+            return elementSizes[index];
+        },
+        firstVisibleElementIndex,
+        lastVisibleElementIndex,
+    ];
+}

package/src/components/dynamic/Component.tsx

@@ -0,0 +1,126 @@
+import React, { useEffect, useState } from 'react';
+import cn from 'classnames';
+
+import {
+    hasOwnProperty,
+    isFn,
+    isNonNullable,
+    isNullable,
+    noop,
+} from '@alfalab/core-components-shared';
+
+import { PageIndicatorDynamicProps } from '../../types';
+
+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,
+} as const;
+
+const FULL_PROGRESS = 100;
+
+export const PageIndicatorDynamic: React.FC<PageIndicatorDynamicProps> = (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<number | undefined>(
+        indexFromProps ?? defaultIndex,
+    );
+    const [progress, setProgress] = useState(0);
+    const inProgress = progress < FULL_PROGRESS;
+    const activeIndexInProps = hasOwnProperty(props, 'activeElement');
+    let duration: number;
+
+    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 (
+        <ol className={styles.pageIndicator} style={{ height, gap }}>
+            {Array.from({ length: count }, (_, index) => {
+                const isActive = index === activeIndex;
+                const style: React.CSSProperties = {
+                    width: isActive ? activeElementWidth : height,
+                    borderRadius: height / 2,
+                };
+                const progressStyle: React.CSSProperties | undefined = isActive
+                    ? { transform: `translateX(${progress - FULL_PROGRESS}%)` }
+                    : undefined;
+
+                return (
+                    <li
+                        key={index}
+                        style={style}
+                        className={cn(styles.element, colorsStyle[colors].element, {
+                            [styles.active]: isActive,
+                            [colorsStyle[colors].active]: isActive,
+                        })}
+                    >
+                        <div
+                            style={progressStyle}
+                            className={cn(styles.progress, colorsStyle[colors].progress)}
+                        />
+                    </li>
+                );
+            })}
+        </ol>
+    );
+};

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

@@ -0,0 +1,11 @@
+@import '../../vars.css';
+
+.element {
+    background: var(--page-indicator-color);
+
+    &.active {
+        .progress {
+            background: var(--page-indicator-active-color);
+        }
+    }
+}

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

@@ -0,0 +1,25 @@
+@import '../../vars.css';
+
+.pageIndicator {
+    margin: 0;
+    padding: 0;
+    display: flex;
+}
+
+.element {
+    list-style-type: none;
+    overflow: hidden;
+    transition: width var(--page-indicator-animation-duration) linear;
+
+    &:not(.active) {
+        .progress {
+            display: none;
+        }
+    }
+
+    .progress {
+        width: 100%;
+        height: 100%;
+        will-change: transform;
+    }
+}

package/src/components/dynamic/index.ts

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

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

@@ -0,0 +1,11 @@
+@import '../../vars.css';
+
+.element {
+    background: var(--page-indicator-color-inverted);
+
+    &.active {
+        .progress {
+            background: var(--page-indicator-active-color-inverted);
+        }
+    }
+}

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

@@ -0,0 +1,11 @@
+@import '../../vars.css';
+
+.element {
+    background: var(--page-indicator-color-static-inverted);
+
+    &.active {
+        .progress {
+            background: var(--page-indicator-active-color-static-inverted);
+        }
+    }
+}

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

@@ -0,0 +1,11 @@
+@import '../../vars.css';
+
+.element {
+    background: var(--page-indicator-color-static);
+
+    &.active {
+        .progress {
+            background: var(--page-indicator-active-color-static);
+        }
+    }
+}

package/src/components/runner/Component.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import cn from 'classnames';
+
+import { PageIndicatorRunnerProps } from '../../types';
+
+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,
+} as const;
+
+export const PageIndicatorRunner: React.FC<PageIndicatorRunnerProps> = ({
+    activeElement,
+    elements: count = 10,
+    size = 4,
+    colors = 'default',
+}) => (
+    <div
+        className={cn(styles.pageIndicator, colorsStyle[colors].pageIndicator)}
+        style={{ height: size, borderRadius: size / 2 }}
+    >
+        <div
+            style={{
+                transform: `translate(${activeElement * 100}%, 0)`,
+                height: size,
+                width: `${100 / count}%`,
+                borderRadius: size / 2,
+            }}
+            className={cn(styles.element, colorsStyle[colors].element)}
+        />
+    </div>
+);

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

@@ -0,0 +1,9 @@
+@import '../../vars.css';
+
+.pageIndicator {
+    background: var(--page-indicator-color);
+}
+
+.element {
+    background: var(--page-indicator-active-color);
+}

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

@@ -0,0 +1,6 @@
+@import '../../vars.css';
+
+.element {
+    transition: transform var(--page-indicator-animation-duration) linear;
+    will-change: transition;
+}

package/src/components/runner/index.ts

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

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

@@ -0,0 +1,9 @@
+@import '../../vars.css';
+
+.pageIndicator {
+    background: var(--page-indicator-color-inverted);
+}
+
+.element {
+    background: var(--page-indicator-active-color-inverted);
+}

package/src/components/runner/static-inverted.module.css

@@ -0,0 +1,9 @@
+@import '../../vars.css';
+
+.pageIndicator {
+    background: var(--page-indicator-color-static-inverted);
+}
+
+.element {
+    background: var(--page-indicator-active-color-static-inverted);
+}

package/src/components/runner/static.module.css

@@ -0,0 +1,9 @@
+@import '../../vars.css';
+
+.pageIndicator {
+    background: var(--page-indicator-color-static);
+}
+
+.element {
+    background: var(--page-indicator-active-color-static);
+}

package/src/components/step/Component.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import cn from 'classnames';
+
+import { PageIndicatorStepProps } from '../../types';
+
+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,
+} as const;
+
+export const PageIndicatorStep: React.FC<PageIndicatorStepProps> = ({
+    activeElement,
+    elements: count = 10,
+    size = 4,
+    gap = 4,
+    colors = 'default',
+}) => (
+    <ol className={styles.pageIndicator} style={{ height: size, gap }}>
+        {Array.from({ length: count }, (_, index) => (
+            <li
+                key={index}
+                style={{ height: size, borderRadius: size / 2 }}
+                className={cn(styles.element, colorsStyle[colors].element, {
+                    [colorsStyle[colors].active]: index === activeElement,
+                })}
+            />
+        ))}
+    </ol>
+);

package/src/components/step/default.module.css

@@ -0,0 +1,9 @@
+@import '../../vars.css';
+
+.element {
+    background: var(--page-indicator-color);
+
+    &.active {
+        background: var(--page-indicator-active-color);
+    }
+}

package/src/components/step/index.module.css

@@ -0,0 +1,14 @@
+@import '../../vars.css';
+
+.pageIndicator {
+    margin: 0;
+    padding: 0;
+    display: flex;
+}
+
+.element {
+    list-style-type: none;
+    flex-grow: 1;
+    transition: backgroud var(--page-indicator-animation-duration)
+        var(--page-indicator-animation-timing-function);
+}

package/src/components/step/index.ts

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

package/src/components/step/inverted.module.css

@@ -0,0 +1,9 @@
+@import '../../vars.css';
+
+.element {
+    background: var(--page-indicator-color-inverted);
+
+    &.active {
+        background: var(--page-indicator-active-color-inverted);
+    }
+}

package/src/components/step/static-inverted.module.css

@@ -0,0 +1,9 @@
+@import '../../vars.css';
+
+.element {
+    background: var(--page-indicator-color-static-inverted);
+
+    &.active {
+        background: var(--page-indicator-active-color-static-inverted);
+    }
+}

package/src/components/step/static.module.css

@@ -0,0 +1,9 @@
+@import '../../vars.css';
+
+.element {
+    background: var(--page-indicator-color-static);
+
+    &.active {
+        background: var(--page-indicator-active-color-static);
+    }
+}

package/src/index.ts

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

package/src/types.ts

@@ -0,0 +1,131 @@
+export interface PageIndicatorDynamicProps {
+    /**
+     * Индекс выбранного элемента по-умолчанию
+     * @default 0
+     */
+    defaultActiveElement?: number;
+    /**
+     * Индекс выбранного элемента
+     */
+    activeElement?: number;
+    /**
+     * Количество элементов (минимум 2)
+     * @default 10
+     */
+    elements?: number;
+    /**
+     * Высота компонента
+     * @default 8
+     */
+    size?: number;
+    /**
+     * Ширина выбранного элемента
+     * @default size * 7
+     */
+    activeElementWidth?: number;
+    /**
+     * Расстояние между элементами
+     * @default 8
+     */
+    gap?: number;
+    /**
+     * Продолжительность прогресса выбранного элемента, в миллисекундах
+     * @default 3000
+     */
+    duration?: (activeElement: number) => number | number;
+    /**
+     * Обработчик при изменении выбранного элемента. Вызывается при заполнении прогресса предыдущего выбранного элемента
+     */
+    onActiveElementChange?: (nextActiveElement: number) => void;
+    /**
+     * Зациклен ли обход элементов
+     * @default false
+     */
+    cycle?: boolean;
+    /**
+     * Активен ли прогресс выбранного элемента
+     * @default true
+     */
+    active?: boolean;
+    /**
+     * Набор цветов для компонента
+     * @default default
+     */
+    colors?: 'default' | 'inverted' | 'static' | 'static-inverted';
+}
+
+export interface PageIndicatorBulletProps {
+    /**
+     * Индекс выбранного элемента
+     */
+    activeElement: number;
+    /**
+     * Количество элементов (минимум 2)
+     * @default 10
+     */
+    elements?: number;
+    /**
+     * Высота компонента
+     * @default 8
+     */
+    size?: number;
+    /**
+     * Расстояние между элементами
+     * @default 8
+     */
+    gap?: number;
+    /**
+     * Набор цветов для компонента
+     * @default default
+     */
+    colors?: 'default' | 'inverted' | 'static' | 'static-inverted';
+}
+
+export interface PageIndicatorStepProps {
+    /**
+     * Индекс выбранного элемента
+     */
+    activeElement: number;
+    /**
+     * Количество элементов (минимум 2)
+     * @default 10
+     */
+    elements?: number;
+    /**
+     * Высота компонента
+     * @default 4
+     */
+    size?: number;
+    /**
+     * Расстояние между элементами
+     * @default 4
+     */
+    gap?: number;
+    /**
+     * Набор цветов для компонента
+     * @default default
+     */
+    colors?: 'default' | 'inverted' | 'static' | 'static-inverted';
+}
+
+export interface PageIndicatorRunnerProps {
+    /**
+     * Индекс выбранного элемента
+     */
+    activeElement: number;
+    /**
+     * Количество элементов (минимум 2)
+     * @default 10
+     */
+    elements?: number;
+    /**
+     * Высота компонента
+     * @default 4
+     */
+    size?: number;
+    /**
+     * Набор цветов для компонента
+     * @default default
+     */
+    colors?: 'default' | 'inverted' | 'static' | 'static-inverted';
+}