npm - @hh.ru/magritte-ui-picker-wheel - Versions diffs - 1.0.1 → 1.0.2 - Mend

@hh.ru/magritte-ui-picker-wheel 1.0.1 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/PickerWheel.d.ts +2 -1
package/PickerWheel.js +293 -1
package/PickerWheel.js.map +1 -1
package/UncontrolledPickerWheel.d.ts +2 -0
package/UncontrolledPickerWheel.js +21 -0
package/UncontrolledPickerWheel.js.map +1 -0
package/index.css +102 -0
package/index.d.ts +3 -0
package/index.js +8 -0
package/index.js.map +1 -1
package/package.json +13 -2
package/types.d.ts +24 -0
package/types.js +3 -0
package/types.js.map +1 -0

package/PickerWheel.d.ts CHANGED Viewed

@@ -1 +1,2 @@
-export declare const PickerWheel: React.FC;
+import { PickerWheelComponent } from '@hh.ru/magritte-ui-picker-wheel/types';
+export declare const PickerWheel: PickerWheelComponent;

package/PickerWheel.js CHANGED Viewed

@@ -1,4 +1,296 @@
-const PickerWheel = () => null;
+import './index.css';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useState, useEffect, useCallback, useLayoutEffect, useMemo } from 'react';
+import classnames from 'classnames';
+import { initScrollHandlers } from '@hh.ru/magritte-internal-custom-scroll';
+import { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';
+var styles = {"picker-wheel":"magritte-picker-wheel___VaPvG_1-0-2","pickerWheel":"magritte-picker-wheel___VaPvG_1-0-2","selected-item-background":"magritte-selected-item-background___UnBPm_1-0-2","selectedItemBackground":"magritte-selected-item-background___UnBPm_1-0-2","columns":"magritte-columns___I7bCB_1-0-2","touch-events-overlay":"magritte-touch-events-overlay___c3YOp_1-0-2","touchEventsOverlay":"magritte-touch-events-overlay___c3YOp_1-0-2","fixed-height":"magritte-fixed-height___BLw9W_1-0-2","fixedHeight":"magritte-fixed-height___BLw9W_1-0-2","column-wrapper":"magritte-column-wrapper___yRwai_1-0-2","columnWrapper":"magritte-column-wrapper___yRwai_1-0-2","circular-column-wrapper":"magritte-circular-column-wrapper___4KG7c_1-0-2","circularColumnWrapper":"magritte-circular-column-wrapper___4KG7c_1-0-2","wide-column-wrapper":"magritte-wide-column-wrapper___nvecx_1-0-2","wideColumnWrapper":"magritte-wide-column-wrapper___nvecx_1-0-2","full-width-column-wrapper":"magritte-full-width-column-wrapper___oxhh1_1-0-2","fullWidthColumnWrapper":"magritte-full-width-column-wrapper___oxhh1_1-0-2","column":"magritte-column___IMYca_1-0-2","item":"magritte-item___4RQVs_1-0-2","align-left":"magritte-align-left___PXJt0_1-0-2","alignLeft":"magritte-align-left___PXJt0_1-0-2","align-right":"magritte-align-right___0yc2S_1-0-2","alignRight":"magritte-align-right___0yc2S_1-0-2","disabled":"magritte-disabled___d3ukm_1-0-2","selected":"magritte-selected___Nar3H_1-0-2"};
+const ITEM_HEIGHT = 48;
+const COLUMN_WIDTH = 64;
+const WIDE_COLUMN_WIDTH = 105;
+/**
+ * Превращает массив точек в массив интервалов
+ * [0, 50, 100, 200] => [{ left: 0, right: 50 }, { left: 50, right: 100 }, { left: 100, right: 200 }]
+ */
+const makeIntervalsFromPoints = (...points) => {
+    return points
+        .flatMap((point, index) => {
+        if (index !== 0 && index !== points.length - 1) {
+            return [point, point];
+        }
+        return point;
+    })
+        .reduce((intervals, point, index) => {
+        if (index % 2 === 0) {
+            return [...intervals, { left: point }];
+        }
+        const interval = { ...intervals[intervals.length - 1], right: point };
+        return [...intervals.slice(0, intervals.length - 1), interval];
+    }, []);
+};
+/**
+ * Генерирует горизонтальные границы в пикселях относительно контейнера, в которых колонки должны реагировать на скролл
+ */
+const makeScrollAreas = (columnCount, containerWidth, showDelimiter) => {
+    switch (columnCount) {
+        case 1:
+            return makeIntervalsFromPoints(0, containerWidth);
+        case 2:
+            return makeIntervalsFromPoints(0, containerWidth / 2, containerWidth);
+        case 3:
+            return makeIntervalsFromPoints(0, (containerWidth - WIDE_COLUMN_WIDTH) / 2, (containerWidth + WIDE_COLUMN_WIDTH) / 2, containerWidth);
+        case 4:
+            if (showDelimiter) {
+                return makeIntervalsFromPoints(0, containerWidth / 2 - COLUMN_WIDTH * 1.5, containerWidth / 2, containerWidth / 2 + COLUMN_WIDTH * 1.5, containerWidth);
+            }
+            return makeIntervalsFromPoints(0, containerWidth / 2 - COLUMN_WIDTH, containerWidth / 2, containerWidth / 2 + COLUMN_WIDTH, containerWidth);
+        default:
+            throw new Error('Unexpected column count');
+    }
+};
+const range = (start, end) => {
+    return [...Array(end - start).keys()].map((_, index) => index + start);
+};
+const translateY = (value) => `translate3d(0, ${value}px, 0)`;
+const useArrayOfRefs = (length) => {
+    const refs = useRef([]);
+    const refCallbacks = useMemo(() => {
+        return [...Array(length).keys()].map((index) => {
+            return (element) => {
+                refs.current[index] = element;
+            };
+        });
+    }, [length]);
+    return [refs, refCallbacks];
+};
+const makeInitialState = (columns) => {
+    return {
+        activeColumnsIndex: null,
+        animations: [],
+        containerMetrics: null,
+        columns: columns.map((column) => ({
+            circular: column.circular,
+            firstCloneIndex: 0,
+            lastCloneIndex: 0,
+            itemCount: column.items.length,
+            translateY: 0,
+            translateYCorrection: null,
+        })),
+        scrollAreas: null,
+    };
+};
+const PickerWheel = ({ columns, fixedHeight, onChange, selectedIndexes, showDelimiter, }) => {
+    const stateRef = useRef(makeInitialState(columns));
+    const [stateKey, setStateKey] = useState(0);
+    const containerRef = useRef(null);
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
+    const selectedIndexesRef = useRef(selectedIndexes);
+    selectedIndexesRef.current = selectedIndexes;
+    const visible = useBreakpoint().isMobile;
+    const [columnWrapperRefs, columnWrapperRefCallbacks] = useArrayOfRefs(columns.length);
+    const [columnRefs, columnRefCallbacks] = useArrayOfRefs(columns.length);
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container) {
+            return void 0;
+        }
+        // вычисляем колонку, которую пользователь начал скроллить
+        const handleTouchStart = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            if (event.changedTouches.length === 1 && stateRef.current.containerMetrics !== null) {
+                stateRef.current.activeColumnsIndex =
+                    stateRef.current.scrollAreas?.findIndex((interval) => {
+                        const relativeX = event.changedTouches[0].clientX - stateRef.current.containerMetrics.left;
+                        return relativeX >= interval.left && relativeX <= interval.right;
+                    }) ?? null;
+            }
+        };
+        // предотвращаем скролл боттомшита
+        const handleTouchMove = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+        };
+        container.addEventListener('touchstart', handleTouchStart, { passive: false });
+        container.addEventListener('touchmove', handleTouchMove, { passive: false });
+        return () => {
+            container.removeEventListener('touchstart', handleTouchStart);
+            container.removeEventListener('touchmove', handleTouchMove);
+        };
+    }, []);
+    /**
+     * Верхний край колонки близко к верхнему краю враппера — клонируем айтемы сверху
+     * */
+    const cloneItemsBefore = useCallback((columnState) => {
+        if (columnState.translateY > -100) {
+            columnState.firstCloneIndex -= 1;
+            columnState.translateYCorrection = -columnState.itemCount * ITEM_HEIGHT;
+            setStateKey((stateKey) => stateKey + 1);
+        }
+    }, [setStateKey]);
+    /**
+     * Нижний край колонки близко к нижнему краю враппера – клонируем айтемы снизу
+     * */
+    const cloneItemsAfter = useCallback((columnState, columnElement, columnWrapper) => {
+        if (columnElement.clientHeight + columnState.translateY - columnWrapper.clientHeight < 100) {
+            columnState.lastCloneIndex += 1;
+            setStateKey((stateKey) => stateKey + 1);
+        }
+    }, [setStateKey]);
+    useEffect(() => {
+        return initScrollHandlers({
+            axis: 'vertical',
+            wrapperRef: containerRef,
+            onTouchMove: (event) => {
+                // TODO cache layout metrics
+                if (stateRef.current.activeColumnsIndex !== null) {
+                    const columnIndex = stateRef.current.activeColumnsIndex;
+                    const columnState = stateRef.current?.columns[columnIndex];
+                    const columnElement = columnRefs.current?.[columnIndex];
+                    const columnWrapper = columnWrapperRefs.current?.[columnIndex];
+                    if (!columnState || !columnElement || !columnWrapper) {
+                        return;
+                    }
+                    columnState.translateY += event.delta;
+                    // бесконечный скролл — добавляем айтемы по мере необходимости
+                    if (columnState.circular) {
+                        // скролл вверх
+                        if (event.delta > 0) {
+                            cloneItemsBefore(columnState);
+                        }
+                        // скролл вниз
+                        if (event.delta < 0) {
+                            cloneItemsAfter(columnState, columnElement, columnWrapper);
+                        }
+                    }
+                    // скролл ограничен — делаем чтобы колонку было нельзя проскроллить за допустимые границы
+                    if (!columnState.circular) {
+                        // скролл вверх
+                        if (event.delta > 0) {
+                            // translateY, когда колонка проскроллена в самый верх (выбран первый айтем)
+                            const minAllowedTranslateY = columnWrapper.clientHeight / 2 - ITEM_HEIGHT / 2;
+                            columnState.translateY = Math.min(columnState.translateY, minAllowedTranslateY);
+                        }
+                        // скролл вниз
+                        if (event.delta < 0) {
+                            // translateY, когда колонка проскроллена в самый низ (выбран последний айтем)
+                            const maxAllowedTranslateY = columnWrapper.clientHeight / 2 - columnElement.clientHeight + ITEM_HEIGHT / 2;
+                            columnState.translateY = Math.max(columnState.translateY, maxAllowedTranslateY);
+                        }
+                    }
+                    columnElement.style.transform = translateY(columnState.translateY);
+                }
+            },
+            onTouchEnd: () => {
+                if (stateRef.current.activeColumnsIndex !== null) {
+                    const columnIndex = stateRef.current.activeColumnsIndex;
+                    const columnState = stateRef.current?.columns[columnIndex];
+                    const columnElement = columnRefs.current?.[columnIndex];
+                    const columnWrapper = columnWrapperRefs.current?.[columnIndex];
+                    if (!columnState || !columnElement || !columnWrapper) {
+                        return;
+                    }
+                    if (columnState.translateYCorrection !== null) ;
+                    // TODO запретить останавливать скролл на disabled айтемах
+                    // translateY, когда колонка проскроллена в самый верх (выбран первый айтем)
+                    const minAllowedTranslateY = columnWrapper.clientHeight / 2 - ITEM_HEIGHT / 2;
+                    const _selectedItemIndex = Math.round((minAllowedTranslateY - columnState.translateY) / ITEM_HEIGHT);
+                    // если колонка зациклена, у нее могут быть отрендерены клоны для бесконечного скролла
+                    // поэтому нужно взять остаток от деления на количество айтемов в колонке
+                    const selectedItemIndex = _selectedItemIndex % columnState.itemCount;
+                    const _selectedIndexes = [...selectedIndexesRef.current];
+                    _selectedIndexes[columnIndex] = selectedItemIndex;
+                    onChangeRef.current?.(_selectedIndexes);
+                    stateRef.current.activeColumnsIndex = null;
+                }
+            },
+        });
+    }, [columnRefs, columnWrapperRefs, cloneItemsBefore, cloneItemsAfter]);
+    /**
+     * Вычисляем layout-метрики
+     */
+    useEffect(() => {
+        if (containerRef.current !== null) {
+            stateRef.current.containerMetrics = containerRef.current.getBoundingClientRect();
+            stateRef.current.scrollAreas = makeScrollAreas(stateRef.current.columns.length, stateRef.current.containerMetrics.width, showDelimiter);
+        }
+        stateRef.current.columns.forEach((columnState, columnIndex) => {
+            const columnWrapper = columnWrapperRefs.current?.[columnIndex];
+            if (!columnWrapper) {
+                return;
+            }
+            if (columnState.circular) {
+                columnWrapper.style.maxHeight = `${columnWrapper.clientHeight}px`;
+            }
+        });
+    }, [showDelimiter, columnWrapperRefs]);
+    /**
+     * Скроллим к initial значению либо округляем позицию скролла до ближайшего айтема после завершения анимации инерции скролла
+     */
+    useEffect(() => {
+        selectedIndexes.forEach((selectedItemIndex, columnIndex) => {
+            const columnState = stateRef.current.columns[columnIndex];
+            const columnElement = columnRefs.current?.[columnIndex];
+            const columnWrapper = columnWrapperRefs.current?.[columnIndex];
+            if (!columnState || !columnElement || !columnWrapper) {
+                return;
+            }
+            // высота колонки либо клона
+            const columnHeight = columnState.itemCount * ITEM_HEIGHT;
+            // translateY, если бы текущий видимый клон был в дефолтной позиции (проскроллен до середины)
+            const translateYAtDefaultPosition = Math.sign(columnState.translateY) *
+                Math.floor(Math.abs(columnState.translateY) / columnHeight) *
+                columnHeight;
+            // translateY, когда колонка проскроллена в самый верх (выбран первый айтем)
+            const minAllowedTranslateY = columnWrapper.clientHeight / 2 - ITEM_HEIGHT / 2;
+            columnState.translateY =
+                translateYAtDefaultPosition + (minAllowedTranslateY - selectedItemIndex * ITEM_HEIGHT);
+            columnElement.style.transform = translateY(columnState.translateY);
+            if (columnState.circular) {
+                cloneItemsBefore(columnState);
+                cloneItemsAfter(columnState, columnElement, columnWrapper);
+            }
+        });
+    }, [selectedIndexes, columnRefs, columnWrapperRefs, cloneItemsBefore, cloneItemsAfter]);
+    /**
+     * Если мы склонировали айтемы сверху для бесконечного скролла, корректируем translateY на высоту склонированных айтемов
+     */
+    useLayoutEffect(() => {
+        stateRef.current.columns.forEach((columnState, columnIndex) => {
+            const columnElement = columnRefs.current?.[columnIndex];
+            if (!columnElement) {
+                return;
+            }
+            if (columnState.translateYCorrection !== null) {
+                columnState.translateY += columnState.translateYCorrection;
+                columnState.translateYCorrection = null;
+                columnElement.style.transform = translateY(columnState.translateY);
+            }
+        });
+    }, [stateKey, columnRefs]);
+    if (!visible) {
+        return null;
+    }
+    const renderColumns = (startIndex, endIndex) => {
+        return range(startIndex, endIndex).map((columnIndex) => (jsx("div", { className: classnames(styles.columnWrapper, {
+                [styles.circularColumnWrapper]: columns[columnIndex].circular,
+                [styles.wideColumnWrapper]: columns.length < 4 && columns.length > 1,
+                [styles.fullWidthColumnWrapper]: columns.length === 1,
+            }), ref: columnWrapperRefCallbacks[columnIndex], children: jsx("div", { className: styles.column, ref: columnRefCallbacks[columnIndex], children: stateRef.current?.columns[columnIndex] &&
+                    range(stateRef.current.columns[columnIndex].firstCloneIndex, stateRef.current.columns[columnIndex].lastCloneIndex + 1).flatMap((columnCloneIndex) => columns[columnIndex].items.map((item) => (jsx("div", { className: classnames(styles.item, {
+                            [styles.alignLeft]: columns[columnIndex].align === 'left',
+                            [styles.alignRight]: columns[columnIndex].align === 'right',
+                            [styles.disabled]: item.disabled,
+                        }), children: item.text }, `${columnCloneIndex}-${columns[columnIndex].items.length}-${item.key ?? item.text}`)))) }) }, `${columns.length}-${columnIndex}`)));
+    };
+    if (showDelimiter) {
+        return (jsxs("div", { className: classnames(styles.pickerWheel), ref: containerRef, children: [jsx("div", { className: styles.selectedItemBackground }), jsxs("div", { className: classnames(styles.columns, { [styles.fixedHeight]: fixedHeight }), children: [renderColumns(0, columns.length / 2), jsx("div", { className: styles.columnWrapper, children: jsx("div", { className: styles.column, children: jsx("div", { className: styles.item, children: "\u2013" }) }) }), renderColumns(columns.length / 2, columns.length)] }), jsx("div", { className: styles.touchEventsOverlay })] }));
+    }
+    return (jsxs("div", { className: styles.pickerWheel, ref: containerRef, children: [jsx("div", { className: styles.selectedItemBackground }), jsx("div", { className: classnames(styles.columns, { [styles.fixedHeight]: fixedHeight }), children: renderColumns(0, columns.length) }), jsx("div", { className: styles.touchEventsOverlay })] }));
+};
 export { PickerWheel };
 //# sourceMappingURL=PickerWheel.js.map

package/PickerWheel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PickerWheel.js","sources":["../src/PickerWheel.tsx"],"sourcesContent":["export const PickerWheel: React.FC = () => null;\n"],"names":[],"mappings":"MAAa,WAAW,GAAa,MAAM;;;;"}
1	+ {"version":3,"file":"PickerWheel.js","sources":["../src/PickerWheel.tsx"],"sourcesContent":["import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport classnames from 'classnames';\n\nimport { initScrollHandlers } from '@hh.ru/magritte-internal-custom-scroll';\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { PickerWheelColumn, PickerWheelComponent } from '@hh.ru/magritte-ui-picker-wheel/types';\n\nimport styles from './picker-wheel.less';\n\nconst ITEM_HEIGHT = 48;\nconst COLUMN_WIDTH = 64;\nconst WIDE_COLUMN_WIDTH = 105;\n\n/*\n Превращает массив точек в массив интервалов\n * [0, 50, 100, 200] => [{ left: 0, right: 50 }, { left: 50, right: 100 }, { left: 100, right: 200 }]\n /\nconst makeIntervalsFromPoints = (...points: Array<number>) => {\n return points\n .flatMap((point, index) => {\n if (index !== 0 && index !== points.length - 1) {\n return [point, point];\n }\n return point;\n })\n .reduce(\n (intervals, point, index) => {\n if (index % 2 === 0) {\n return [...intervals, { left: point }];\n }\n const interval = { ...intervals[intervals.length - 1], right: point };\n return [...intervals.slice(0, intervals.length - 1), interval];\n },\n [] as Array<{ left: number; right?: number }>\n ) as Array<{ left: number; right: number }>;\n};\n\n/\n Генерирует горизонтальные границы в пикселях относительно контейнера, в которых колонки должны реагировать на скролл\n /\nconst makeScrollAreas = (\n columnCount: number,\n containerWidth: number,\n showDelimiter?: boolean\n): Array<{ left: number; right: number }> => {\n switch (columnCount) {\n case 1:\n return makeIntervalsFromPoints(0, containerWidth);\n case 2:\n return makeIntervalsFromPoints(0, containerWidth / 2, containerWidth);\n case 3:\n return makeIntervalsFromPoints(\n 0,\n (containerWidth - WIDE_COLUMN_WIDTH) / 2,\n (containerWidth + WIDE_COLUMN_WIDTH) / 2,\n containerWidth\n );\n case 4:\n if (showDelimiter) {\n return makeIntervalsFromPoints(\n 0,\n containerWidth / 2 - COLUMN_WIDTH 1.5,\n containerWidth / 2,\n containerWidth / 2 + COLUMN_WIDTH * 1.5,\n containerWidth\n );\n }\n return makeIntervalsFromPoints(\n 0,\n containerWidth / 2 - COLUMN_WIDTH,\n containerWidth / 2,\n containerWidth / 2 + COLUMN_WIDTH,\n containerWidth\n );\n default:\n throw new Error('Unexpected column count');\n }\n};\n\nconst range = (start: number, end: number) => {\n return [...Array(end - start).keys()].map((_, index) => index + start);\n};\n\nconst translateY = (value: number) => `translate3d(0, ${value}px, 0)`;\n\nconst useArrayOfRefs = <ElementType,>(\n length: number\n): [React.RefObject<Array<ElementType \| null>>, Array<React.RefCallback<ElementType \| null>>] => {\n const refs = useRef<Array<ElementType \| null>>([]);\n const refCallbacks = useMemo(() => {\n return [...Array(length).keys()].map((index) => {\n return (element: ElementType \| null) => {\n refs.current[index] = element;\n };\n });\n }, [length]);\n return [refs, refCallbacks];\n};\n\ninterface ColumnState {\n circular?: boolean;\n /*\n Если колонка не зациклена (circular), всегда 0\n * Если колонка зациклена, это индекс самого первого клона колонки сверху для бесконечного скролла (начинается с -1 и уменьшается)\n /\n firstCloneIndex: number;\n /\n Если колонка не зациклена (circular), всегда 0\n * Если колонка зациклена, это индекс самого последнего клона колонки снизу для бесконечного скролла (начинается с 1 и увеличивается)\n /\n lastCloneIndex: number;\n /* Количество айтемов колонки, копируется из props.columns чтобы не нужно было добавлять props.columns в зависимости /\n itemCount: number;\n /* translateY для эмуляции скролла /\n translateY: number;\n /* Коррекция translateY, которую нужно применить в следующем layout эффекте, прежде чем отрендерятся новые айтемы сверху /\n translateYCorrection: number \| null;\n}\n\ninterface PickerWheelState {\n activeColumnsIndex: number \| null;\n animations: Array<{ renderedKey: number; itemIndex: number }>;\n containerMetrics: DOMRect \| null;\n columns: Array<ColumnState>;\n scrollAreas: Array<{ left: number; right: number }> \| null;\n}\n\nconst makeInitialState = (columns: Array<PickerWheelColumn>): PickerWheelState => {\n return {\n activeColumnsIndex: null,\n animations: [],\n containerMetrics: null,\n columns: columns.map((column) => ({\n circular: column.circular,\n firstCloneIndex: 0,\n lastCloneIndex: 0,\n itemCount: column.items.length,\n translateY: 0,\n translateYCorrection: null,\n })),\n scrollAreas: null,\n };\n};\n\nexport const PickerWheel: PickerWheelComponent = ({\n columns,\n fixedHeight,\n onChange,\n selectedIndexes,\n showDelimiter,\n}) => {\n const stateRef = useRef<PickerWheelState>(makeInitialState(columns));\n const [stateKey, setStateKey] = useState(0);\n\n const containerRef = useRef<HTMLDivElement>(null);\n const onChangeRef = useRef(onChange);\n onChangeRef.current = onChange;\n const selectedIndexesRef = useRef(selectedIndexes);\n selectedIndexesRef.current = selectedIndexes;\n const visible = useBreakpoint().isMobile;\n const [columnWrapperRefs, columnWrapperRefCallbacks] = useArrayOfRefs<HTMLDivElement>(columns.length);\n const [columnRefs, columnRefCallbacks] = useArrayOfRefs<HTMLDivElement>(columns.length);\n\n useEffect(() => {\n const container = containerRef.current;\n if (!container) {\n return void 0;\n }\n\n // вычисляем колонку, которую пользователь начал скроллить\n const handleTouchStart = (event: TouchEvent) => {\n event.preventDefault();\n event.stopPropagation();\n\n if (event.changedTouches.length === 1 && stateRef.current.containerMetrics !== null) {\n stateRef.current.activeColumnsIndex =\n stateRef.current.scrollAreas?.findIndex((interval) => {\n const relativeX =\n event.changedTouches[0].clientX - (stateRef.current.containerMetrics as DOMRect).left;\n return relativeX >= interval.left && relativeX <= interval.right;\n }) ?? null;\n }\n };\n\n // предотвращаем скролл боттомшита\n const handleTouchMove = (event: TouchEvent) => {\n event.preventDefault();\n event.stopPropagation();\n };\n\n container.addEventListener('touchstart', handleTouchStart, { passive: false });\n container.addEventListener('touchmove', handleTouchMove, { passive: false });\n return () => {\n container.removeEventListener('touchstart', handleTouchStart);\n container.removeEventListener('touchmove', handleTouchMove);\n };\n }, []);\n\n /\n Верхний край колонки близко к верхнему краю враппера — клонируем айтемы сверху\n * /\n const cloneItemsBefore = useCallback(\n (columnState: ColumnState) => {\n if (columnState.translateY > -100) {\n columnState.firstCloneIndex -= 1;\n columnState.translateYCorrection = -columnState.itemCount ITEM_HEIGHT;\n setStateKey((stateKey) => stateKey + 1);\n }\n },\n [setStateKey]\n );\n\n /*\n Нижний край колонки близко к нижнему краю враппера – клонируем айтемы снизу\n * /\n const cloneItemsAfter = useCallback(\n (columnState: ColumnState, columnElement: HTMLDivElement, columnWrapper: HTMLDivElement) => {\n if (columnElement.clientHeight + columnState.translateY - columnWrapper.clientHeight < 100) {\n columnState.lastCloneIndex += 1;\n setStateKey((stateKey) => stateKey + 1);\n }\n },\n [setStateKey]\n );\n\n useEffect(() => {\n return initScrollHandlers({\n axis: 'vertical',\n wrapperRef: containerRef,\n onTouchMove: (event) => {\n // TODO cache layout metrics\n if (stateRef.current.activeColumnsIndex !== null) {\n const columnIndex = stateRef.current.activeColumnsIndex;\n const columnState = stateRef.current?.columns[columnIndex];\n const columnElement = columnRefs.current?.[columnIndex];\n const columnWrapper = columnWrapperRefs.current?.[columnIndex];\n if (!columnState \|\| !columnElement \|\| !columnWrapper) {\n return;\n }\n\n columnState.translateY += event.delta;\n\n // бесконечный скролл — добавляем айтемы по мере необходимости\n if (columnState.circular) {\n // скролл вверх\n if (event.delta > 0) {\n cloneItemsBefore(columnState);\n }\n\n // скролл вниз\n if (event.delta < 0) {\n cloneItemsAfter(columnState, columnElement, columnWrapper);\n }\n }\n\n // скролл ограничен — делаем чтобы колонку было нельзя проскроллить за допустимые границы\n if (!columnState.circular) {\n // скролл вверх\n if (event.delta > 0) {\n // translateY, когда колонка проскроллена в самый верх (выбран первый айтем)\n const minAllowedTranslateY = columnWrapper.clientHeight / 2 - ITEM_HEIGHT / 2;\n columnState.translateY = Math.min(columnState.translateY, minAllowedTranslateY);\n }\n\n // скролл вниз\n if (event.delta < 0) {\n // translateY, когда колонка проскроллена в самый низ (выбран последний айтем)\n const maxAllowedTranslateY =\n columnWrapper.clientHeight / 2 - columnElement.clientHeight + ITEM_HEIGHT / 2;\n columnState.translateY = Math.max(columnState.translateY, maxAllowedTranslateY);\n }\n }\n\n columnElement.style.transform = translateY(columnState.translateY);\n }\n },\n onTouchEnd: () => {\n if (stateRef.current.activeColumnsIndex !== null) {\n const columnIndex = stateRef.current.activeColumnsIndex;\n const columnState = stateRef.current?.columns[columnIndex];\n const columnElement = columnRefs.current?.[columnIndex];\n const columnWrapper = columnWrapperRefs.current?.[columnIndex];\n if (!columnState \|\| !columnElement \|\| !columnWrapper) {\n return;\n }\n\n if (columnState.translateYCorrection !== null) {\n // TODO хз что делать\n }\n\n // TODO запретить останавливать скролл на disabled айтемах\n\n // translateY, когда колонка проскроллена в самый верх (выбран первый айтем)\n const minAllowedTranslateY = columnWrapper.clientHeight / 2 - ITEM_HEIGHT / 2;\n const _selectedItemIndex = Math.round(\n (minAllowedTranslateY - columnState.translateY) / ITEM_HEIGHT\n );\n // если колонка зациклена, у нее могут быть отрендерены клоны для бесконечного скролла\n // поэтому нужно взять остаток от деления на количество айтемов в колонке\n const selectedItemIndex = _selectedItemIndex % columnState.itemCount;\n\n const _selectedIndexes = [...selectedIndexesRef.current];\n _selectedIndexes[columnIndex] = selectedItemIndex;\n onChangeRef.current?.(_selectedIndexes as typeof selectedIndexes);\n\n stateRef.current.activeColumnsIndex = null;\n }\n },\n });\n }, [columnRefs, columnWrapperRefs, cloneItemsBefore, cloneItemsAfter]);\n\n /\n Вычисляем layout-метрики\n /\n useEffect(() => {\n if (containerRef.current !== null) {\n stateRef.current.containerMetrics = containerRef.current.getBoundingClientRect();\n stateRef.current.scrollAreas = makeScrollAreas(\n stateRef.current.columns.length,\n stateRef.current.containerMetrics.width,\n showDelimiter\n );\n }\n\n stateRef.current.columns.forEach((columnState, columnIndex) => {\n const columnWrapper = columnWrapperRefs.current?.[columnIndex];\n if (!columnWrapper) {\n return;\n }\n\n if (columnState.circular) {\n columnWrapper.style.maxHeight = `${columnWrapper.clientHeight}px`;\n }\n });\n }, [showDelimiter, columnWrapperRefs]);\n\n /\n Скроллим к initial значению либо округляем позицию скролла до ближайшего айтема после завершения анимации инерции скролла\n /\n useEffect(() => {\n selectedIndexes.forEach((selectedItemIndex, columnIndex) => {\n const columnState = stateRef.current.columns[columnIndex];\n const columnElement = columnRefs.current?.[columnIndex];\n const columnWrapper = columnWrapperRefs.current?.[columnIndex];\n if (!columnState \|\| !columnElement \|\| !columnWrapper) {\n return;\n }\n\n // высота колонки либо клона\n const columnHeight = columnState.itemCount ITEM_HEIGHT;\n // translateY, если бы текущий видимый клон был в дефолтной позиции (проскроллен до середины)\n const translateYAtDefaultPosition =\n Math.sign(columnState.translateY) \n Math.floor(Math.abs(columnState.translateY) / columnHeight) \n columnHeight;\n // translateY, когда колонка проскроллена в самый верх (выбран первый айтем)\n const minAllowedTranslateY = columnWrapper.clientHeight / 2 - ITEM_HEIGHT / 2;\n columnState.translateY =\n translateYAtDefaultPosition + (minAllowedTranslateY - selectedItemIndex * ITEM_HEIGHT);\n columnElement.style.transform = translateY(columnState.translateY);\n\n if (columnState.circular) {\n cloneItemsBefore(columnState);\n cloneItemsAfter(columnState, columnElement, columnWrapper);\n }\n });\n }, [selectedIndexes, columnRefs, columnWrapperRefs, cloneItemsBefore, cloneItemsAfter]);\n\n /*\n Если мы склонировали айтемы сверху для бесконечного скролла, корректируем translateY на высоту склонированных айтемов\n /\n useLayoutEffect(() => {\n stateRef.current.columns.forEach((columnState, columnIndex) => {\n const columnElement = columnRefs.current?.[columnIndex];\n if (!columnElement) {\n return;\n }\n\n if (columnState.translateYCorrection !== null) {\n columnState.translateY += columnState.translateYCorrection;\n columnState.translateYCorrection = null;\n columnElement.style.transform = translateY(columnState.translateY);\n }\n });\n }, [stateKey, columnRefs]);\n\n if (!visible) {\n return null;\n }\n\n const renderColumns = (startIndex: number, endIndex: number) => {\n return range(startIndex, endIndex).map((columnIndex) => (\n <div\n className={classnames(styles.columnWrapper, {\n [styles.circularColumnWrapper]: columns[columnIndex].circular,\n [styles.wideColumnWrapper]: columns.length < 4 && columns.length > 1,\n [styles.fullWidthColumnWrapper]: columns.length === 1,\n })}\n key={`${columns.length}-${columnIndex}`}\n ref={columnWrapperRefCallbacks[columnIndex]}\n >\n <div className={styles.column} ref={columnRefCallbacks[columnIndex]}>\n {/ Если колонка зациклена, у нее могут быть клоны сверху или снизу от оригинальной колонки для бесконечного скролла /}\n {/ У клона нет собственного DOM-элемента, это просто копия всех айтемов колонки */}\n {stateRef.current?.columns[columnIndex] &&\n range(\n stateRef.current.columns[columnIndex].firstCloneIndex,\n stateRef.current.columns[columnIndex].lastCloneIndex + 1\n ).flatMap((columnCloneIndex) =>\n columns[columnIndex].items.map((item) => (\n <div\n className={classnames(styles.item, {\n [styles.alignLeft]: columns[columnIndex].align === 'left',\n [styles.alignRight]: columns[columnIndex].align === 'right',\n [styles.disabled]: item.disabled,\n })}\n key={`${columnCloneIndex}-${columns[columnIndex].items.length}-${item.key ?? item.text}`}\n >\n {item.text}\n </div>\n ))\n )}\n </div>\n </div>\n ));\n };\n\n if (showDelimiter) {\n return (\n <div className={classnames(styles.pickerWheel)} ref={containerRef}>\n <div className={styles.selectedItemBackground} />\n <div className={classnames(styles.columns, { [styles.fixedHeight]: fixedHeight })}>\n {renderColumns(0, columns.length / 2)}\n <div className={styles.columnWrapper}>\n <div className={styles.column}>\n <div className={styles.item}>–</div>\n </div>\n </div>\n {renderColumns(columns.length / 2, columns.length)}\n </div>\n <div className={styles.touchEventsOverlay} />\n </div>\n );\n }\n\n return (\n <div className={styles.pickerWheel} ref={containerRef}>\n <div className={styles.selectedItemBackground} />\n <div className={classnames(styles.columns, { [styles.fixedHeight]: fixedHeight })}>\n {renderColumns(0, columns.length)}\n </div>\n <div className={styles.touchEventsOverlay} />\n </div>\n );\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/UncontrolledPickerWheel.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { PickerWheelComponent } from '@hh.ru/magritte-ui-picker-wheel/types';
2	+ export declare const UncontrolledPickerWheel: PickerWheelComponent;

package/UncontrolledPickerWheel.js ADDED Viewed

@@ -0,0 +1,21 @@
+import './index.css';
+import { jsx } from 'react/jsx-runtime';
+import { useState, useRef, useCallback } from 'react';
+import { PickerWheel } from './PickerWheel.js';
+import 'classnames';
+import '@hh.ru/magritte-internal-custom-scroll';
+import '@hh.ru/magritte-ui-breakpoint';
+const UncontrolledPickerWheel = ({ selectedIndexes: initialSelectedIndexes, onChange, ...props }) => {
+    const [selectedIndexes, setSelectedIndexes] = useState(initialSelectedIndexes);
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
+    const handleChange = useCallback((value) => {
+        onChangeRef.current?.(value);
+        setSelectedIndexes(value);
+    }, [setSelectedIndexes]);
+    return jsx(PickerWheel, { selectedIndexes: selectedIndexes, onChange: handleChange, ...props });
+};
+export { UncontrolledPickerWheel };
+//# sourceMappingURL=UncontrolledPickerWheel.js.map

package/UncontrolledPickerWheel.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"UncontrolledPickerWheel.js","sources":["../src/UncontrolledPickerWheel.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\n\nimport { PickerWheel } from '@hh.ru/magritte-ui-picker-wheel/PickerWheel';\nimport { PickerWheelComponent } from '@hh.ru/magritte-ui-picker-wheel/types';\n\nexport const UncontrolledPickerWheel: PickerWheelComponent = ({\n selectedIndexes: initialSelectedIndexes,\n onChange,\n ...props\n}) => {\n const [selectedIndexes, setSelectedIndexes] = useState(initialSelectedIndexes);\n const onChangeRef = useRef(onChange);\n onChangeRef.current = onChange;\n\n const handleChange = useCallback(\n (value: Array<number | null>) => {\n onChangeRef.current?.(value as typeof initialSelectedIndexes);\n setSelectedIndexes(value as typeof initialSelectedIndexes);\n },\n [setSelectedIndexes]\n );\n\n return <PickerWheel selectedIndexes={selectedIndexes} onChange={handleChange} {...props} />;\n};\n"],"names":["_jsx"],"mappings":";;;;;;;AAKa,MAAA,uBAAuB,GAAyB,CAAC,EAC1D,eAAe,EAAE,sBAAsB,EACvC,QAAQ,EACR,GAAG,KAAK,EACX,KAAI;IACD,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,sBAAsB,CAAC,CAAC;AAC/E,IAAA,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;AACrC,IAAA,WAAW,CAAC,OAAO,GAAG,QAAQ,CAAC;AAE/B,IAAA,MAAM,YAAY,GAAG,WAAW,CAC5B,CAAC,KAA2B,KAAI;AAC5B,QAAA,WAAW,CAAC,OAAO,GAAG,KAAsC,CAAC,CAAC;QAC9D,kBAAkB,CAAC,KAAsC,CAAC,CAAC;AAC/D,KAAC,EACD,CAAC,kBAAkB,CAAC,CACvB,CAAC;AAEF,IAAA,OAAOA,GAAC,CAAA,WAAW,EAAC,EAAA,eAAe,EAAE,eAAe,EAAE,QAAQ,EAAE,YAAY,EAAM,GAAA,KAAK,GAAI,CAAC;AAChG;;;;"}

package/index.css ADDED Viewed

@@ -0,0 +1,102 @@
+:root{
+  --magritte-color-text-primary-v21-3-2:#000000;
+  --magritte-color-text-state-primary-disabled-v21-3-2:#0000007a;
+  --magritte-color-component-time-picker-background-selection-v21-3-2:#F1F4F9;
+}
+:root{
+  --magritte-typography-title-4-semibold-font-family-v21-3-2:"hh sans";
+  --magritte-typography-title-4-semibold-font-weight-v21-3-2:500;
+  --magritte-typography-title-4-semibold-line-height-v21-3-2:32px;
+  --magritte-typography-title-4-semibold-font-size-v21-3-2:22px;
+  --magritte-typography-title-4-semibold-letter-spacing-v21-3-2:-0.0075em;
+  --magritte-typography-title-4-semibold-text-indent-v21-3-2:0px;
+  --magritte-typography-title-4-semibold-text-transform-v21-3-2:none;
+  --magritte-typography-title-4-semibold-text-decoration-v21-3-2:none;
+  --magritte-typography-label-1-regular-font-family-v21-3-2:"hh sans";
+  --magritte-typography-label-1-regular-font-weight-v21-3-2:400;
+  --magritte-typography-label-1-regular-line-height-v21-3-2:26px;
+  --magritte-typography-label-1-regular-font-size-v21-3-2:18px;
+  --magritte-typography-label-1-regular-letter-spacing-v21-3-2:-0.005em;
+  --magritte-typography-label-1-regular-text-indent-v21-3-2:0px;
+  --magritte-typography-label-1-regular-text-transform-v21-3-2:none;
+  --magritte-typography-label-1-regular-text-decoration-v21-3-2:none;
+}
+.magritte-night-theme{
+  --magritte-color-text-primary-v21-3-2:#ffffff;
+  --magritte-color-text-state-primary-disabled-v21-3-2:#ababab7a;
+  --magritte-color-component-time-picker-background-selection-v21-3-2:#262626;
+}
+.magritte-picker-wheel___VaPvG_1-0-2{
+  position:relative;
+}
+.magritte-selected-item-background___UnBPm_1-0-2{
+  position:absolute;
+  inset:calc(50% - 48px / 2) 16px;
+  background-color:var(--magritte-color-component-time-picker-background-selection-v21-3-2);
+}
+.magritte-columns___I7bCB_1-0-2{
+  position:relative;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  overflow:clip;
+}
+.magritte-touch-events-overlay___c3YOp_1-0-2{
+  position:absolute;
+  inset:0;
+}
+.magritte-fixed-height___BLw9W_1-0-2{
+  height:336px;
+}
+.magritte-column-wrapper___yRwai_1-0-2{
+  position:relative;
+  flex:0 0 64px;
+  max-height:100%;
+}
+.magritte-circular-column-wrapper___4KG7c_1-0-2{
+  overflow:clip;
+}
+.magritte-wide-column-wrapper___nvecx_1-0-2{
+  flex:0 0 105px;
+}
+.magritte-full-width-column-wrapper___oxhh1_1-0-2{
+  flex:0 0 100%;
+}
+.magritte-column___IMYca_1-0-2{
+  will-change:transform;
+  transform:translate3d(0, 0, 0);
+}
+.magritte-item___4RQVs_1-0-2{
+  font-family:var(--magritte-typography-label-1-regular-font-family-v21-3-2);
+  font-weight:var(--magritte-typography-label-1-regular-font-weight-v21-3-2);
+  line-height:var(--magritte-typography-label-1-regular-line-height-v21-3-2);
+  font-size:var(--magritte-typography-label-1-regular-font-size-v21-3-2);
+  letter-spacing:var(--magritte-typography-label-1-regular-letter-spacing-v21-3-2);
+  text-indent:var(--magritte-typography-label-1-regular-text-indent-v21-3-2);
+  text-transform:var(--magritte-typography-label-1-regular-text-transform-v21-3-2);
+  text-decoration:var(--magritte-typography-label-1-regular-text-decoration-v21-3-2);
+  color:var(--magritte-color-text-primary-v21-3-2);
+  height:48px;
+  line-height:48px;
+  text-align:center;
+}
+.magritte-item___4RQVs_1-0-2.magritte-align-left___PXJt0_1-0-2{
+  text-align:left;
+}
+.magritte-item___4RQVs_1-0-2.magritte-align-right___0yc2S_1-0-2{
+  text-align:right;
+}
+.magritte-item___4RQVs_1-0-2.magritte-disabled___d3ukm_1-0-2{
+  color:var(--magritte-color-text-state-primary-disabled-v21-3-2);
+}
+.magritte-item___4RQVs_1-0-2.magritte-selected___Nar3H_1-0-2{
+  font-family:var(--magritte-typography-title-4-semibold-font-family-v21-3-2);
+  font-weight:var(--magritte-typography-title-4-semibold-font-weight-v21-3-2);
+  line-height:var(--magritte-typography-title-4-semibold-line-height-v21-3-2);
+  font-size:var(--magritte-typography-title-4-semibold-font-size-v21-3-2);
+  letter-spacing:var(--magritte-typography-title-4-semibold-letter-spacing-v21-3-2);
+  text-indent:var(--magritte-typography-title-4-semibold-text-indent-v21-3-2);
+  text-transform:var(--magritte-typography-title-4-semibold-text-transform-v21-3-2);
+  text-decoration:var(--magritte-typography-title-4-semibold-text-decoration-v21-3-2);
+  line-height:48px;
+}

package/index.d.ts CHANGED Viewed

@@ -1 +1,4 @@
+export * from '@hh.ru/magritte-ui-theme-provider';
+export * from '@hh.ru/magritte-ui-picker-wheel/types';
 export { PickerWheel } from '@hh.ru/magritte-ui-picker-wheel/PickerWheel';
+export { UncontrolledPickerWheel } from '@hh.ru/magritte-ui-picker-wheel/UncontrolledPickerWheel';

package/index.js CHANGED Viewed

@@ -1,2 +1,10 @@
+import './index.css';
+export * from '@hh.ru/magritte-ui-theme-provider';
 export { PickerWheel } from './PickerWheel.js';
+export { UncontrolledPickerWheel } from './UncontrolledPickerWheel.js';
+import 'react/jsx-runtime';
+import 'react';
+import 'classnames';
+import '@hh.ru/magritte-internal-custom-scroll';
+import '@hh.ru/magritte-ui-breakpoint';
 //# sourceMappingURL=index.js.map

package/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
1	+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@hh.ru/magritte-ui-picker-wheel",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [
@@ -19,8 +19,19 @@
     "test": "yarn root:test $(pwd)",
     "watch": "yarn root:watch $(pwd)"
   },
+  "dependencies": {
+    "@hh.ru/magritte-design-tokens": "21.3.2",
+    "@hh.ru/magritte-internal-custom-scroll": "1.3.3",
+    "@hh.ru/magritte-ui-breakpoint": "5.0.0",
+    "@hh.ru/magritte-ui-theme-provider": "1.1.41",
+    "@hh.ru/magritte-ui-typography": "3.0.31"
+  },
+  "peerDependencies": {
+    "classnames": ">=2.3.2",
+    "react": ">=18.2.0"
+  },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "327d1626220753aa98056b4b14719e454ba8d983"
+  "gitHead": "1a024f1f06c4e70d20448ea4487a377b9b64faed"
 }

package/types.d.ts ADDED Viewed

@@ -0,0 +1,24 @@
+export type ArrayWithLength<Item, Length> = Array<Item> & {
+    length: Length;
+};
+export interface PickerWheelItem {
+    disabled?: boolean;
+    key?: React.Key;
+    text: string;
+}
+export interface PickerWheelColumn {
+    align?: 'left' | 'center' | 'right';
+    circular?: boolean;
+    items: Array<PickerWheelItem>;
+}
+export interface PickerWheelProps<ColumnCount extends 1 | 2 | 3 | 4> {
+    /** Устанавливает фиксированную высоту в 7 айтемов. Нужно использовать, если компонент используется вне боттомшита */
+    fixedHeight?: boolean;
+    columns: ArrayWithLength<PickerWheelColumn, ColumnCount>;
+    onChange?: (selectedIndexes: ArrayWithLength<number, ColumnCount>) => void;
+    selectedIndexes: ArrayWithLength<number, ColumnCount>;
+    showDelimiter?: ColumnCount extends 2 | 4 ? boolean : false;
+}
+export interface PickerWheelComponent {
+    <ColumnCount extends 1 | 2 | 3 | 4>(props: PickerWheelProps<ColumnCount>): React.ReactElement | null;
+}

package/types.js ADDED Viewed

@@ -0,0 +1,3 @@
+import './index.css';
+//# sourceMappingURL=types.js.map

package/types.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"types.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}