@sima-land/ui-nucleons 44.2.0 → 44.2.1

package/expandable/expandable-group.module.scss

@@ -4,15 +4,17 @@
 
 .inner {
   display: flex;
+  margin: 0;
+  padding: 0;
   flex-wrap: wrap;
 }
 
 .item {
+  display: block;
+  margin: 0;
+  padding: 0;
   max-width: 100%;
   &.hidden {
     display: none;
   }
-  &.invisible {
-    opacity: 0;
-  }
 }

package/expandable/index.d.ts

@@ -36,5 +36,5 @@ export interface GroupItemProps {
 export declare function ExpandableGroup({ gap, itemHeight, lineLimit, defaultExpanded, children, onExpand, opener, className, style, expanded: expandedProp, }: ExpandableGroupProps): JSX.Element;
 export declare const Expandable: {
     readonly Group: typeof ExpandableGroup;
-    readonly Item: React.ForwardRefExoticComponent<GroupItemProps & React.RefAttributes<HTMLDivElement>>;
+    readonly Item: React.ForwardRefExoticComponent<GroupItemProps & React.RefAttributes<HTMLLIElement>>;
 };

package/expandable/index.js

@@ -33,7 +33,6 @@ const bind_1 = __importDefault(require("classnames/bind"));
 const expandable_group_module_scss_1 = __importDefault(require("./expandable-group.module.scss"));
 const cx = bind_1.default.bind(expandable_group_module_scss_1.default);
 const GroupContext = (0, react_1.createContext)({ gap: 8, itemHeight: 32 });
-const ItemContext = (0, react_1.createContext)({});
 /**
  * Группа элементов с ограничением на число выводимых строк и возможностью показать все.
  * @param props Свойства.
@@ -42,36 +41,45 @@ const ItemContext = (0, react_1.createContext)({});
 function ExpandableGroup({ gap = 8, itemHeight = 32, lineLimit = 2, defaultExpanded = false, children, onExpand, opener = data => react_1.default.createElement(react_1.default.Fragment, null,
     "\u0415\u0449\u0451 ",
     data.hiddenCount), className, style, expanded: expandedProp, }) {
+    const wrapperRef = (0, react_1.useRef)(null);
     const containerRef = (0, react_1.useRef)(null);
     const openerRef = (0, react_1.useRef)(null);
+    const [mounted, setMounted] = (0, react_1.useState)(false);
     const [expanded, setExpanded] = (0, react_1.useState)(defaultExpanded);
-    const viewState = (0, utils_1.useViewState)(containerRef, openerRef);
-    const needHideItems = viewState.lastVisibleIndex !== -1 && !expanded;
-    const items = react_1.Children.toArray(children).reduce((result, child, index) => {
-        const isDisplayed = !needHideItems || index < viewState.lastVisibleIndex;
+    const items = react_1.Children.toArray(children).reduce((result, child) => {
         if ((0, react_1.isValidElement)(child) && child.type === ExpandableItem) {
-            result.push(react_1.default.createElement(ItemContext.Provider, { key: index, value: { hidden: !isDisplayed } }, (0, react_1.cloneElement)(child, { hidden: !isDisplayed })));
+            result.push(child);
         }
         return result;
     }, []);
+    (0, react_1.useEffect)(() => {
+        setMounted(true);
+    }, []);
     (0, react_1.useEffect)(() => {
         expandedProp !== undefined && setExpanded(expandedProp);
     }, [expandedProp]);
+    (0, react_1.useEffect)(() => {
+        setMounted(true);
+    }, []);
+    const { hiddenCount } = (0, utils_1.useExpandable)({
+        expanded,
+        wrapperRef,
+        containerRef,
+        openerRef,
+    });
     return (react_1.default.createElement(GroupContext.Provider, { value: { gap, itemHeight } },
-        react_1.default.createElement("div", { ref: containerRef, className: cx('root', className), style: Object.assign(Object.assign({}, style), { maxHeight: expanded ? undefined : `${itemHeight * lineLimit + gap * (lineLimit - 1)}px` }) },
-            react_1.default.createElement("div", { className: expandable_group_module_scss_1.default.inner, style: { marginRight: `${-gap}px`, marginBottom: `${-gap}px` } },
+        react_1.default.createElement("div", { ref: wrapperRef, className: cx('root', className), style: Object.assign(Object.assign({}, style), { maxHeight: expanded ? undefined : `${itemHeight * lineLimit + gap * (lineLimit - 1)}px` }) },
+            react_1.default.createElement("ul", { ref: containerRef, className: expandable_group_module_scss_1.default.inner, style: { marginRight: `${-gap}px`, marginBottom: `${-gap}px` } },
                 items,
-                !expanded && (react_1.default.createElement(ItemContext.Provider, { value: { invisible: false } },
-                    react_1.default.createElement(ExpandableItem, { ref: openerRef, onClick: () => {
-                            setExpanded(true);
-                            onExpand === null || onExpand === void 0 ? void 0 : onExpand();
-                        }, "data-testid": 'expandable:opener' }, opener({ hiddenCount: items.length - viewState.lastVisibleIndex }))))))));
+                mounted && !expanded && (react_1.default.createElement(ExpandableItem, { ref: openerRef, onClick: () => {
+                        setExpanded(true);
+                        onExpand === null || onExpand === void 0 ? void 0 : onExpand();
+                    }, "data-testid": 'expandable:opener' }, opener({ hiddenCount })))))));
 }
 exports.ExpandableGroup = ExpandableGroup;
 const ExpandableItem = (0, react_1.forwardRef)(({ children, onClick, 'data-testid': testId = 'expandable:item' }, ref) => {
     const { gap, itemHeight } = (0, react_1.useContext)(GroupContext);
-    const { invisible, hidden } = (0, react_1.useContext)(ItemContext);
-    return (react_1.default.createElement("div", { ref: ref, className: cx('item', { hidden, invisible }), "data-testid": testId, onClick: onClick, style: {
+    return (react_1.default.createElement("li", { ref: ref, className: cx('item'), "data-testid": testId, onClick: onClick, style: {
             height: `${itemHeight}px`,
             margin: `0 ${gap}px ${gap}px 0`,
         } }, children));

package/expandable/utils.d.ts

@@ -1,20 +1,28 @@
 import { RefObject } from 'react';
 export interface ViewState {
-    phase: 'default' | 'ready';
     lastVisibleIndex: number;
 }
-export declare const initialViewState: ViewState;
 /**
  * Хук состояния группы элементов ограниченных несколькими строками с возможностью показать все.
- * @param containerRef Ref элемента-контейнера.
- * @param openerRef Ref элемента кнопки, показывающей всю группу.
- * @return Состояние.
+ * @param options.expanded Развернут ли список.
+ * @param options.wrapperRef Реф элемента, формирующего ограничение по высоте.
+ * @param options.containerRef Реф элемента, содержащего список.
+ * @param options.openerRef Реф элемента "открывашки".
+ * @return Рассчитанные данные: кол-во скрытых элементов.
  */
-export declare function useViewState(containerRef: RefObject<HTMLElement>, openerRef: RefObject<HTMLElement>): ViewState;
+export declare function useExpandable({ expanded, wrapperRef, containerRef, openerRef, }: {
+    expanded: boolean;
+    wrapperRef: RefObject<HTMLElement>;
+    containerRef: RefObject<HTMLElement>;
+    openerRef: RefObject<HTMLElement>;
+}): {
+    hiddenCount: number;
+};
 /**
  * Определяет индекс последнего видимого элемента для свернутого списка.
- * @param containerRef Ref элемента-контейнера.
- * @param openerRef Ref элемента кнопки, показывающей весь список.
+ * @param wrapper Элемент, формирующий ограничение по высоте.
+ * @param items Элементы, все кроме "закрывашки".
+ * @param opener Элемент "закрывашки".
  * @return Состояние.
  */
-export declare function defineViewState(containerRef: RefObject<HTMLElement>, openerRef: RefObject<HTMLElement>): ViewState;
+export declare function defineViewState(wrapper: HTMLElement, items: Element[], opener: HTMLElement): ViewState;

package/expandable/utils.js

@@ -3,78 +3,82 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.defineViewState = exports.useViewState = exports.initialViewState = void 0;
+exports.defineViewState = exports.useExpandable = void 0;
 const react_1 = require("react");
 const hooks_1 = require("../hooks");
 const on_1 = __importDefault(require("../helpers/on"));
-exports.initialViewState = {
-    phase: 'default',
-    lastVisibleIndex: -1,
-};
+const expandable_group_module_scss_1 = __importDefault(require("./expandable-group.module.scss"));
 /**
  * Хук состояния группы элементов ограниченных несколькими строками с возможностью показать все.
- * @param containerRef Ref элемента-контейнера.
- * @param openerRef Ref элемента кнопки, показывающей всю группу.
- * @return Состояние.
+ * @param options.expanded Развернут ли список.
+ * @param options.wrapperRef Реф элемента, формирующего ограничение по высоте.
+ * @param options.containerRef Реф элемента, содержащего список.
+ * @param options.openerRef Реф элемента "открывашки".
+ * @return Рассчитанные данные: кол-во скрытых элементов.
  */
-function useViewState(containerRef, openerRef) {
-    const prevPhaseRef = (0, react_1.useRef)(null);
-    const [viewState, setViewState] = (0, react_1.useState)(exports.initialViewState);
-    (0, react_1.useEffect)(() => {
-        const off = (0, on_1.default)(window, 'resize', () => {
-            setViewState(exports.initialViewState);
-        });
-        return off;
-    }, []);
-    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
-        if (viewState.phase === 'default') {
-            setViewState(defineViewState(containerRef, openerRef));
+function useExpandable({ expanded, wrapperRef, containerRef, openerRef, }) {
+    const [hiddenCount, setHiddenCount] = (0, react_1.useState)(0);
+    const calc = (0, react_1.useCallback)(() => {
+        const wrapperEl = wrapperRef.current;
+        const containerEl = containerRef.current;
+        const openerEl = openerRef.current;
+        if (expanded) {
+            if (containerEl) {
+                for (const item of containerEl.children) {
+                    item.classList.remove(expandable_group_module_scss_1.default.hidden);
+                }
+            }
         }
-        // если произошел рендер и на предыдущем рендере уже все было готово - сбрасываем состояние
-        if (viewState.phase === 'ready' && prevPhaseRef.current === 'ready') {
-            setViewState({
-                phase: 'default',
-                lastVisibleIndex: -1,
-            });
+        else {
+            if (wrapperEl && containerEl && openerEl) {
+                const items = [...containerEl.children].filter(child => child !== openerEl);
+                // делаем все элементы списка видимыми чтобы правильно считать размеры
+                for (const item of items) {
+                    item.classList.remove(expandable_group_module_scss_1.default.hidden);
+                }
+                // определяем какие элементы не влезли в ограничение по высоте
+                const state = defineViewState(wrapperEl, items, openerEl);
+                // делаем невидимыми элементы списка которые не влезли
+                for (const [index, item] of items.entries()) {
+                    if (item !== openerEl && index >= state.lastVisibleIndex) {
+                        item.classList.add(expandable_group_module_scss_1.default.hidden);
+                    }
+                }
+                setHiddenCount(items.length - state.lastVisibleIndex);
+            }
         }
-        prevPhaseRef.current = viewState.phase;
-    });
-    return viewState;
+    }, [expanded]);
+    // пересчитываем после каждого rerender'а
+    (0, hooks_1.useIsomorphicLayoutEffect)(calc);
+    // пересчитываем при resize
+    (0, react_1.useEffect)(() => (0, on_1.default)(window, 'resize', calc), [calc]);
+    return { hiddenCount };
 }
-exports.useViewState = useViewState;
+exports.useExpandable = useExpandable;
 /**
  * Определяет индекс последнего видимого элемента для свернутого списка.
- * @param containerRef Ref элемента-контейнера.
- * @param openerRef Ref элемента кнопки, показывающей весь список.
+ * @param wrapper Элемент, формирующий ограничение по высоте.
+ * @param items Элементы, все кроме "закрывашки".
+ * @param opener Элемент "закрывашки".
  * @return Состояние.
  */
-function defineViewState(containerRef, openerRef) {
-    const state = {
-        phase: 'ready',
-        lastVisibleIndex: -1,
-    };
-    const container = containerRef.current;
-    const opener = openerRef.current;
-    if (container && opener && opener.parentNode) {
-        const parentRect = container.getBoundingClientRect();
-        const childList = [...opener.parentNode.children];
-        const firstHiddenNodeIndex = childList
-            .filter(child => child !== opener)
-            .findIndex(child => {
-            const childRect = child.getBoundingClientRect();
-            return childRect.top - parentRect.top >= parentRect.height;
-        });
-        if (firstHiddenNodeIndex !== -1) {
-            const lastVisibleIndex = firstHiddenNodeIndex - 1;
-            const lastVisible = childList[lastVisibleIndex];
-            if (lastVisible) {
-                const rightBound = lastVisible.getBoundingClientRect().right;
-                const rightContainerBound = container.getBoundingClientRect().right;
-                // проверяем, хватает ли кнопке места (с запасом в половину) после последнего видимого дочернего элемента
-                const isOpenerFit = rightContainerBound - rightBound >= opener.clientWidth * 1.5;
-                // если хватает места - ставим кнопку после последнего, иначе - вместо
-                state.lastVisibleIndex = lastVisibleIndex + Number(isOpenerFit);
-            }
+function defineViewState(wrapper, items, opener) {
+    const state = { lastVisibleIndex: -1 };
+    const parentRect = wrapper.getBoundingClientRect();
+    const firstHiddenNodeIndex = items.findIndex(child => {
+        const childRect = child.getBoundingClientRect();
+        return childRect.top - parentRect.top >= parentRect.height;
+    });
+    if (firstHiddenNodeIndex !== -1) {
+        const lastVisibleIndex = firstHiddenNodeIndex - 1;
+        const lastVisible = items[lastVisibleIndex];
+        if (lastVisible) {
+            const rightBound = lastVisible.getBoundingClientRect().right;
+            const rightContainerBound = wrapper.getBoundingClientRect().right;
+            // проверяем, хватает ли кнопке места (с запасом в половину) после последнего видимого дочернего элемента
+            const isOpenerFit = rightContainerBound - rightBound >= opener.clientWidth * 1.5;
+            // если хватает места - ставим кнопку после последнего, иначе - вместо
+            state.lastVisibleIndex = lastVisibleIndex + Number(isOpenerFit);
         }
     }
     return state;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sima-land/ui-nucleons",
-  "version": "44.2.0",
+  "version": "44.2.1",
   "repository": "ssh://git@github.com:sima-land/ui-nucleons.git",
   "author": "www.sima-land.ru team",
   "license": "Apache-2.0",