intelicoreact 1.5.32 → 1.5.34

package/dist/src/Atomic/UI/NavLine/NavLine.js

@@ -0,0 +1,317 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _reactfeather = /*#__PURE__*/ _interop_require_wildcard(require("react-feather"));
+const _reactrouterdom = require("react-router-dom");
+const _indexconstants = require("../../../Constants/index.constants");
+require("./NavLine.scss");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const CN = 'nav-line';
+/**
+ * Проверяет и нормализует ref
+ * @param ref - React ref объект или функция обратного вызова
+ * @returns Нормализованный ref или null
+ */ function checkedRef(ref) {
+    if (!ref) return null;
+    return typeof ref === 'function' ? (node)=>ref(node) : ref;
+}
+const NavLine = ({ root = '', activeTab, variant, onChange, className, items, children, isLocal = false, mode, isNavigateByKeys, isTabLoading, scrollMode = false, testId = CN })=>{
+    const [navLineItems, setNavLineItems] = (0, _react.useState)([]);
+    const wrapperRef = (0, _react.useRef)(null);
+    const wrapperInnerRef = (0, _react.useRef)(null);
+    const [showScrollButtons, setShowScrollButtons] = (0, _react.useState)(false);
+    const [canScrollLeft, setCanScrollLeft] = (0, _react.useState)(false);
+    const [canScrollRight, setCanScrollRight] = (0, _react.useState)(false);
+    const [isScrollBlocked, setIsScrollBlocked] = (0, _react.useState)(false);
+    const checkScroll = (0, _react.useCallback)(()=>{
+        const inner = wrapperInnerRef.current;
+        if (!inner) return;
+        const hasOverflow = inner.scrollWidth > inner.clientWidth;
+        const canScrollLeft = inner.scrollLeft > 0;
+        const canScrollRight = inner.scrollLeft < inner.scrollWidth - inner.clientWidth;
+        setShowScrollButtons(hasOverflow);
+        setCanScrollLeft(canScrollLeft);
+        setCanScrollRight(canScrollRight);
+    }, []);
+    const scroll = (0, _react.useCallback)((direction)=>{
+        if (isScrollBlocked || !wrapperInnerRef.current) return;
+        setIsScrollBlocked(true);
+        const scrollAmount = 100;
+        const offset = direction === 'left' ? -scrollAmount : scrollAmount;
+        try {
+            wrapperInnerRef.current.scrollBy({
+                left: offset,
+                behavior: 'smooth'
+            });
+        } catch (error) {
+            console.error('scrollBy is not supported', error);
+            // Fallback для браузеров, не поддерживающих scrollBy
+            if (wrapperInnerRef.current) {
+                wrapperInnerRef.current.scrollLeft += offset;
+            }
+        }
+        setTimeout(()=>{
+            setIsScrollBlocked(false);
+            checkScroll();
+        }, 300);
+    }, [
+        isScrollBlocked,
+        checkScroll
+    ]);
+    const handleWheel = (0, _react.useCallback)((e)=>{
+        if (!scrollMode) return;
+        e.preventDefault();
+        if (e.deltaY > 0) {
+            scroll('right');
+        } else {
+            scroll('left');
+        }
+    }, [
+        scroll,
+        scrollMode
+    ]);
+    const onTabChange = (0, _react.useCallback)((item)=>{
+        if (!item.disabled && !(mode === 'create' && item.tabId !== 'general')) {
+            onChange(item.tabId);
+        }
+    }, [
+        mode,
+        onChange
+    ]);
+    const navigateByKeys = (0, _react.useCallback)((event)=>{
+        var _items_, _items_1;
+        if (event.repeat) return;
+        const activeTabIndex = items.findIndex((tab)=>tab.tabId === activeTab);
+        const nextTabID = (_items_ = items[activeTabIndex + 1]) === null || _items_ === void 0 ? void 0 : _items_.tabId;
+        const prevTabID = (_items_1 = items[activeTabIndex - 1]) === null || _items_1 === void 0 ? void 0 : _items_1.tabId;
+        if (event.keyCode === _indexconstants.KEYBOARD_KEY_CODES.ARROW_RIGHT && nextTabID) {
+            onChange(nextTabID);
+        } else if (event.keyCode === _indexconstants.KEYBOARD_KEY_CODES.ARROW_LEFT && prevTabID) {
+            onChange(prevTabID);
+        }
+    }, [
+        activeTab,
+        items,
+        onChange
+    ]);
+    // Инициализация табов с ref
+    (0, _react.useEffect)(()=>{
+        setNavLineItems(items.map((item)=>({
+                ...item,
+                ref: /*#__PURE__*/ (0, _react.createRef)()
+            })));
+    }, [
+        items
+    ]);
+    // Обработка клавиатурной навигации
+    (0, _react.useEffect)(()=>{
+        if (isNavigateByKeys && !isTabLoading) {
+            document.addEventListener('keydown', navigateByKeys);
+        }
+        return ()=>document.removeEventListener('keydown', navigateByKeys);
+    }, [
+        isNavigateByKeys,
+        isTabLoading,
+        navigateByKeys
+    ]);
+    // Настройка скролла
+    (0, _react.useEffect)(()=>{
+        if (!scrollMode) return;
+        const inner = wrapperInnerRef.current;
+        if (!inner) return;
+        const resizeObserver = new ResizeObserver(checkScroll);
+        resizeObserver.observe(inner);
+        inner.addEventListener('scroll', checkScroll);
+        inner.addEventListener('wheel', handleWheel, {
+            passive: false
+        });
+        checkScroll();
+        return ()=>{
+            resizeObserver.disconnect();
+            inner.removeEventListener('scroll', checkScroll);
+            inner.removeEventListener('wheel', handleWheel);
+        };
+    }, [
+        scrollMode,
+        checkScroll,
+        handleWheel
+    ]);
+    const renderNavItem = (item)=>{
+        const Icon = item.icon ? _reactfeather[item.icon] : null;
+        const isDisabled = item.disabled || mode === 'create' && item.tabId !== 'general';
+        const commonProps = {
+            'title': item.title,
+            'key': `tab__${item.tabId}`,
+            'className': (0, _classnames.default)({
+                'nav-line__item': !variant
+            }, {
+                'nav-line--simple__item': variant === 'simple'
+            }, {
+                active: activeTab === item.tabId
+            }, {
+                disabled: isDisabled
+            }, {
+                'nav-line__item--hidden': item.isHidden
+            }),
+            'role': 'tab',
+            'aria-selected': activeTab === item.tabId,
+            'aria-disabled': isDisabled,
+            'tabIndex': isDisabled ? -1 : 0
+        };
+        const content = /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+            className: "nav-line__content",
+            children: [
+                Icon && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                    className: "nav-line__item--icon",
+                    "aria-hidden": "true",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(Icon, {})
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                    className: (0, _classnames.default)({
+                        'nav-line__item--label': variant !== 'simple'
+                    }),
+                    children: item.label
+                }),
+                item.count !== undefined && /*#__PURE__*/ (0, _jsxruntime.jsxs)("span", {
+                    className: "nav-line-count",
+                    "aria-label": `${item.count} items`,
+                    children: [
+                        "(",
+                        item.count,
+                        ")"
+                    ]
+                })
+            ]
+        });
+        if (isLocal) {
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                ...commonProps,
+                ref: checkedRef(item.ref),
+                onClick: ()=>!isDisabled && onTabChange(item),
+                onKeyPress: (e)=>{
+                    if (!isDisabled && (e.key === 'Enter' || e.key === ' ')) {
+                        e.preventDefault();
+                        onTabChange(item);
+                    }
+                },
+                children: content
+            });
+        }
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactrouterdom.NavLink, {
+            ...commonProps,
+            to: `${root}${(item === null || item === void 0 ? void 0 : item.linkChapter) || item.tabId}/`,
+            onClick: (e)=>{
+                if (isDisabled) {
+                    e.preventDefault();
+                }
+            },
+            children: content
+        });
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+        className: "nav-line-wrapper",
+        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+            "data-testid": testId,
+            className: (0, _classnames.default)({
+                [CN]: !variant
+            }, {
+                [`${CN}--simple`]: variant === 'simple'
+            }, {
+                [`${CN}--scroll-mode`]: scrollMode
+            }, className),
+            ref: wrapperRef,
+            children: [
+                scrollMode && showScrollButtons && /*#__PURE__*/ (0, _jsxruntime.jsx)("button", {
+                    type: "button",
+                    "data-testid": "nav-line-scroll-prev",
+                    className: "nav-line--simple__arrow nav-line--simple__arrow--prev",
+                    onClick: ()=>scroll('left'),
+                    "aria-label": "Scroll previous",
+                    disabled: !canScrollLeft,
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.ChevronLeft, {})
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                    ref: wrapperInnerRef,
+                    className: (0, _classnames.default)({
+                        'nav-line__inner': !variant
+                    }, {
+                        'nav-line--simple__inner': variant === 'simple'
+                    }),
+                    role: "tablist",
+                    "aria-orientation": "horizontal",
+                    children: navLineItems.map(renderNavItem)
+                }),
+                scrollMode && showScrollButtons && /*#__PURE__*/ (0, _jsxruntime.jsx)("button", {
+                    type: "button",
+                    "data-testid": "nav-line-scroll-next",
+                    className: "nav-line--simple__arrow nav-line--simple__arrow--next",
+                    onClick: ()=>scroll('right'),
+                    "aria-label": "Scroll next",
+                    disabled: !canScrollRight,
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.ChevronRight, {})
+                }),
+                children && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                    className: "nav-line__body",
+                    role: "tabpanel",
+                    children: children
+                })
+            ]
+        })
+    });
+};
+const _default = NavLine;

package/dist/src/Atomic/UI/NavLine/NavLine.scss

@@ -0,0 +1,262 @@
+.nav-line-wrapper {
+  // Colors
+  --nav-line-bg: #f7fafc;
+  --nav-line-text: #1e1e2d;
+  --nav-line-active: #6b81dd;
+  --nav-line-border: #cfcfcf;
+  --nav-line-arrow: #424242;
+  --nav-line-arrow-shadow: #ddd;
+  --nav-line-white: #fff;
+
+  // Sizes
+  --nav-line-font-size: 13px;
+  --nav-line-icon-size: 17px;
+  --nav-line-arrow-size: 24px;
+  --nav-line-arrow-width: 36px;
+  --nav-line-arrow-height: 39px;
+
+  // Spacing
+  --nav-line-padding: 10px;
+  --nav-line-body-padding: 24px 32px;
+  --nav-line-margin: -32px;
+
+  // Animation
+  --nav-line-transition-duration: 0.3s;
+  --nav-line-transition-timing: ease;
+
+  .nav-line {
+    &__content {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    &__inner {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: flex-start;
+      align-items: center;
+
+      background-color: var(--nav-line-bg);
+
+      transition: transform var(--nav-line-transition-duration) var(--nav-line-transition-timing);
+    }
+
+    &__item {
+      margin-bottom: -1px;
+      padding: var(--nav-line-padding);
+
+      font-size: var(--nav-line-font-size);
+      cursor: pointer;
+      user-select: none;
+
+      color: var(--nav-line-text);
+      border-top: 2px solid transparent;
+      border-right: 1px solid transparent;
+      border-left: 1px solid transparent;
+
+      transition: all var(--nav-line-transition-duration) var(--nav-line-transition-timing);
+
+      &--label {
+        text-transform: uppercase;
+      }
+
+      &--icon {
+        display: flex;
+        align-items: center;
+
+        margin-right: 5px;
+
+        svg {
+          width: var(--nav-line-icon-size);
+          height: var(--nav-line-icon-size);
+        }
+      }
+
+      &.active {
+        font-weight: 500;
+        cursor: default;
+        text-decoration: none;
+
+        color: var(--nav-line-active);
+        border-top: 2px solid var(--nav-line-active);
+        border-right: 1px solid var(--nav-line-border);
+        border-left: 1px solid var(--nav-line-border);
+        background: var(--nav-line-white);
+
+        transition: all var(--nav-line-transition-duration) var(--nav-line-transition-timing);
+      }
+    }
+
+    &__body {
+      position: relative;
+      bottom: 0;
+
+      display: flex;
+      flex-wrap: wrap;
+
+      margin-right: var(--nav-line-margin);
+      margin-left: var(--nav-line-margin);
+      padding: var(--nav-line-body-padding);
+
+      font-size: var(--nav-line-font-size);
+
+      border-top: 1px solid var(--nav-line-border);
+      background-color: var(--nav-line-bg);
+
+      &:empty {
+        padding: 0 32px;
+      }
+    }
+
+    &--scroll-mode {
+      position: relative;
+
+      .nav-line--simple__inner {
+        overflow: hidden;
+        flex-wrap: nowrap;
+      }
+
+      .nav-line--simple__item {
+        flex-wrap: nowrap;
+
+        white-space: nowrap;
+      }
+    }
+  }
+
+  .nav-line--simple {
+    &__inner {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: flex-start;
+      align-items: center;
+
+      padding-left: 8px;
+
+      transition: transform var(--nav-line-transition-duration) var(--nav-line-transition-timing);
+    }
+
+    &__item {
+      position: relative;
+
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      margin-bottom: -1px;
+      padding: var(--nav-line-padding) var(--nav-line-padding) 14px;
+
+      font-size: var(--nav-line-font-size);
+      cursor: pointer;
+      user-select: none;
+      text-decoration: none !important;
+
+      color: var(--nav-line-text);
+      border-bottom: 1px solid var(--nav-line-border);
+
+      transition: all var(--nav-line-transition-duration) var(--nav-line-transition-timing);
+
+      &::after {
+        position: absolute;
+        bottom: 0;
+        left: 50%; // Центрируем полоску
+
+        width: 0;
+        height: 2px;
+
+        content: '';
+
+        background-color: var(--nav-line-active);
+
+        transition: all var(--nav-line-transition-duration) var(--nav-line-transition-timing);
+        transform: translateX(-50%); // Выравниваем относительно центра
+      }
+
+      &:hover {
+        &::after {
+          width: 50%;
+
+          opacity: 0.6;
+        }
+      }
+
+      &.active {
+        font-weight: 500;
+        cursor: default;
+
+        opacity: 1;
+
+        &::after {
+          width: 100%;
+
+          opacity: 1;
+        }
+      }
+    }
+
+    &__arrow {
+      position: absolute;
+      z-index: 2;
+
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      box-sizing: border-box;
+      width: var(--nav-line-arrow-width);
+      height: var(--nav-line-arrow-height);
+
+      color: var(--nav-line-arrow);
+      background: var(--nav-line-white);
+
+      transition: all var(--nav-line-transition-duration) var(--nav-line-transition-timing);
+
+      &:hover {
+        cursor: pointer;
+      }
+
+      &--prev {
+        top: 0;
+        left: 0;
+
+        border-radius: 8px 0 0 8px;
+        box-shadow: 10px 0 10px -5px var(--nav-line-arrow-shadow);
+
+        transform: translate(-100%, -2px);
+      }
+
+      &--next {
+        top: 0;
+        right: 0;
+
+        border-radius: 0 8px 8px 0;
+        box-shadow: -10px 0 10px -5px var(--nav-line-arrow-shadow);
+
+        transform: translate(100%, -2px);
+      }
+
+      svg {
+        width: var(--nav-line-arrow-size);
+        height: var(--nav-line-arrow-size);
+      }
+    }
+
+    &__body {
+      padding: 15px 10px;
+
+      font-size: var(--nav-line-font-size);
+    }
+  }
+
+  .nav-line-count {
+    margin-left: 5px;
+  }
+
+  .post-log-tab__body {
+    background-color: var(--nav-line-bg);
+  }
+
+  .nav-line__item--hidden {
+    display: none;
+  }
+}