@invoicebox/ui 0.1.0-alpha.320 → 0.1.0-alpha.321

package/dist/esm/components/form/DateTimeInput/components/MobileNumbersColumn/index.js

@@ -1,193 +0,0 @@
-function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import * as S from './styles';
-// Константы для оптимизации
-var OPACITY_STEPS = [1, 0.8, 0.5, 0.3, 0.2];
-var INCLINE_STEPS = [0, 20, 45, 70, 80];
-var MobileNumbersColumn = function MobileNumbersColumn(_ref) {
-  var numbers = _ref.numbers,
-    value = _ref.value,
-    onChange = _ref.onChange;
-  var _useState = useState(null),
-    _useState2 = _slicedToArray(_useState, 2),
-    centerNumber = _useState2[0],
-    setCenterNumber = _useState2[1];
-  var containerRef = useRef(null);
-  var itemsRef = useRef([]);
-  var isScrollingRef = useRef(null);
-  var rafRef = useRef(null);
-
-  // Функция для центрирования элемента
-  var snapToCenter = useCallback(function (index) {
-    if (!containerRef.current || index === -1) return;
-    var container = containerRef.current;
-    var item = itemsRef.current[index];
-    if (!item) return;
-    var scrollOffset = item.offsetTop - container.clientHeight / 2 + item.clientHeight / 2;
-    container.scrollTo({
-      top: scrollOffset,
-      behavior: 'smooth'
-    });
-  }, []);
-
-  // Оптимизированная функция поиска центра
-  var findCenterElement = useCallback(function () {
-    if (!containerRef.current) return -1;
-    var container = containerRef.current;
-    var containerRect = container.getBoundingClientRect();
-    var containerCenter = containerRect.top + containerRect.height / 2;
-    var minDistance = Infinity;
-    var closestIndex = -1;
-
-    // Находим только ближайший индекс
-    itemsRef.current.forEach(function (item, index) {
-      if (item) {
-        var itemRect = item.getBoundingClientRect();
-        var itemCenter = itemRect.top + itemRect.height / 2;
-        var distance = Math.abs(itemCenter - containerCenter);
-        if (distance < minDistance) {
-          minDistance = distance;
-          closestIndex = index;
-        }
-      }
-    });
-    var newNumber = numbers.find(function (a, index) {
-      return index === closestIndex;
-    });
-    if (closestIndex !== -1 && typeof newNumber === 'number') {
-      setCenterNumber(newNumber.toString());
-    }
-    return closestIndex;
-  }, [numbers]);
-  useEffect(function () {
-    if (value) {
-      var indexValue = numbers.indexOf(value);
-      snapToCenter(indexValue);
-    } else {
-      snapToCenter(0);
-    }
-  }, [numbers, snapToCenter, value]);
-
-  // Оптимизированный обработчик скролла
-  useEffect(function () {
-    if (!containerRef.current) return;
-    var container = containerRef.current;
-    var handleScroll = function handleScroll() {
-      if (rafRef.current) {
-        cancelAnimationFrame(rafRef.current);
-      }
-      rafRef.current = requestAnimationFrame(function () {
-        findCenterElement();
-      });
-      if (isScrollingRef.current) {
-        clearTimeout(isScrollingRef.current);
-      }
-      isScrollingRef.current = setTimeout(function () {
-        var closestIndex = findCenterElement();
-        if (closestIndex !== -1) {
-          snapToCenter(closestIndex);
-          var newNumber = numbers.find(function (item, index) {
-            return index === closestIndex;
-          });
-          if (typeof newNumber === 'number') {
-            onChange(newNumber);
-          }
-        }
-      }, 150);
-    };
-    container.addEventListener('scroll', handleScroll, {
-      passive: true
-    });
-    setTimeout(function () {
-      return findCenterElement();
-    }, 0);
-    return function () {
-      container.removeEventListener('scroll', handleScroll);
-      if (rafRef.current) {
-        cancelAnimationFrame(rafRef.current);
-      }
-      if (isScrollingRef.current) {
-        clearTimeout(isScrollingRef.current);
-      }
-    };
-  }, [findCenterElement, numbers, onChange, snapToCenter]);
-
-  // Функция получения стилей на основе индекса
-  var getItemStyles = useCallback(function (index) {
-    if (!centerNumber) return {
-      opacity: 0.2,
-      incline: 80
-    };
-    var activeIndex = numbers.indexOf(Number(centerNumber));
-
-    // Расстояние от активного элемента
-    var distance = Math.abs(index - activeIndex);
-    var maxDistance = 5; // Максимальное расстояние для применения эффекта
-
-    // Выбираем стиль на основе расстояния
-    var stepIndex = Math.min(distance, maxDistance);
-
-    // Используем предвычисленные значения
-    var opacityIndex = Math.min(stepIndex, OPACITY_STEPS.length - 1);
-    var inclineIndex = Math.min(stepIndex, INCLINE_STEPS.length - 1);
-    return {
-      opacity: OPACITY_STEPS[opacityIndex],
-      incline: INCLINE_STEPS[inclineIndex]
-    };
-  }, [centerNumber, numbers]);
-  var handleNumberClick = useCallback(function (index) {
-    snapToCenter(index);
-  }, [snapToCenter]);
-  return /*#__PURE__*/React.createElement(S.Wrapper, {
-    ref: containerRef
-  }, /*#__PURE__*/React.createElement(S.Number, {
-    $opacity: 0,
-    $isActive: false,
-    $incline: 0
-  }), /*#__PURE__*/React.createElement(S.Number, {
-    $opacity: 0,
-    $isActive: false,
-    $incline: 0
-  }), /*#__PURE__*/React.createElement(S.Number, {
-    $opacity: 0,
-    $isActive: false,
-    $incline: 0
-  }), numbers.map(function (numberItem, index) {
-    var _getItemStyles = getItemStyles(index),
-      opacity = _getItemStyles.opacity,
-      incline = _getItemStyles.incline;
-    var isActive = centerNumber === numberItem.toString();
-    return /*#__PURE__*/React.createElement(S.Number, {
-      key: numberItem,
-      $opacity: opacity,
-      $incline: incline,
-      $isActive: isActive,
-      ref: function ref(el) {
-        if (el) {
-          itemsRef.current[index] = el;
-        }
-      },
-      onClick: function onClick() {
-        return handleNumberClick(index);
-      }
-    }, numberItem.toString().length === 1 ? "0".concat(numberItem) : numberItem);
-  }), /*#__PURE__*/React.createElement(S.Number, {
-    $opacity: 0,
-    $isActive: false,
-    $incline: 0
-  }), /*#__PURE__*/React.createElement(S.Number, {
-    $opacity: 0,
-    $isActive: false,
-    $incline: 0
-  }), /*#__PURE__*/React.createElement(S.Number, {
-    $opacity: 0,
-    $isActive: false,
-    $incline: 0
-  }));
-};
-export default MobileNumbersColumn;

package/dist/esm/components/form/DateTimeInput/components/MobileNumbersColumn/styles.js

@@ -1,19 +0,0 @@
-import styled, { css } from 'styled-components';
-import { reducedMotion } from '../../../../../utils/reducedMotion';
-export var Wrapper = styled.div.withConfig({
-  displayName: "styles__Wrapper",
-  componentId: "sc-jqg7lg-0"
-})(["height:100%;overflow:scroll;display:flex;flex-direction:column;align-items:center;width:100%;position:relative;text-align:right;transform:translateZ(0);backface-visibility:hidden;will-change:transform;scrollbar-width:none;-ms-overflow-style:none;&::-webkit-scrollbar{display:none;}"]);
-export var Number = styled.div.withConfig({
-  displayName: "styles__Number",
-  componentId: "sc-jqg7lg-1"
-})(["opacity:", ";width:28px;height:28px;flex-shrink:0;transform:translateZ(0) rotateX(", "deg);backface-visibility:hidden;will-change:transform,opacity;transition:all 0.1s ease;", " ", ""], function (_ref) {
-  var $opacity = _ref.$opacity;
-  return $opacity;
-}, function (_ref2) {
-  var $incline = _ref2.$incline;
-  return $incline;
-}, function (_ref3) {
-  var $isActive = _ref3.$isActive;
-  return $isActive && css(["margin:4px 0;"]);
-}, reducedMotion);