@alfalab/core-components-typography 4.13.1 → 4.14.0

package/moderncssm/hooks/use-skeleton.js

@@ -1,50 +0,0 @@
-import React, { useState, useRef } from 'react';
-import cn from 'classnames';
-import { Skeleton } from '@alfalab/core-components-skeleton/moderncssm';
-import { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';
-import styles from './use-skeleton.module.css';
-
-function useSkeleton(showSkeleton, skeletonProps) {
-    const [skeletonParams, setSkeletonParams] = useState();
-    const textRef = useRef(null);
-    useLayoutEffect_SAFE_FOR_SSR(() => {
-        if (showSkeleton && textRef.current) {
-            const style = getComputedStyle(textRef.current);
-            const textHeight = textRef.current.offsetHeight;
-            const fontSize = parseInt(style.fontSize, 10);
-            const lineHeight = parseInt(style.lineHeight, 10);
-            const padding = (lineHeight - fontSize) % 2 === 0
-                ? (lineHeight - fontSize) / 2
-                : (lineHeight - fontSize - 1) / 2;
-            const rows = skeletonProps?.rows
-                ? skeletonProps?.rows
-                : Math.ceil(textHeight / lineHeight);
-            setSkeletonParams({
-                height: lineHeight - padding * 2,
-                padding: `${padding}px 0`,
-                rows,
-            });
-        }
-        else {
-            setSkeletonParams(undefined);
-        }
-    }, [showSkeleton, skeletonProps?.rows]);
-    const renderSkeleton = (props) => {
-        if (showSkeleton && skeletonParams) {
-            return (React.createElement("div", { className: cn(skeletonProps?.wrapperClassName, props.wrapperClassName, skeletonProps?.align && styles[skeletonProps.align]), "data-test-id": props.dataTestId }, [...Array(skeletonParams.rows)].map((_, idx) => {
-                const width = Array.isArray(skeletonProps?.width)
-                    ? skeletonProps?.width[idx]
-                    : skeletonProps?.width;
-                return (
-                // eslint-disable-next-line react/no-array-index-key
-                React.createElement("div", { key: idx, style: { width, padding: skeletonParams.padding } },
-                    React.createElement(Skeleton, { visible: true, className: styles.skeletonText },
-                        React.createElement("div", { style: { height: skeletonParams.height } }))));
-            })));
-        }
-        return null;
-    };
-    return { renderSkeleton, textRef };
-}
-
-export { useSkeleton };

package/moderncssm/hooks/use-skeleton.module.css

@@ -1,17 +0,0 @@
-/* */
-
-.skeletonText.skeletonText {
-    border-radius: var(--border-radius-pill);
-}
-
-.left > div {
-    margin-right: auto;
-}
-
-.center > div {
-    margin: var(--gap-0) auto;
-}
-
-.right > div {
-    margin-left: auto;
-}

package/src/hooks/index.ts

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

package/src/hooks/use-skeleton.module.css

@@ -1,17 +0,0 @@
-@import '@alfalab/core-components-vars/src/index.css';
-
-.skeletonText.skeletonText {
-    border-radius: var(--border-radius-pill);
-}
-
-.left > div {
-    margin-right: auto;
-}
-
-.center > div {
-    margin: var(--gap-0) auto;
-}
-
-.right > div {
-    margin-left: auto;
-}

package/src/hooks/use-skeleton.tsx

@@ -1,86 +0,0 @@
-import React, { useRef, useState } from 'react';
-import cn from 'classnames';
-
-import { Skeleton } from '@alfalab/core-components-skeleton';
-import { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';
-
-import { TextSkeletonProps } from '../types';
-
-import styles from './use-skeleton.module.css';
-
-type TextSkeletonParams = {
-    height: number;
-    padding: string;
-    rows: number;
-};
-
-type SkeletonProps = {
-    wrapperClassName?: string;
-    dataTestId?: string;
-};
-
-export function useSkeleton(showSkeleton?: boolean, skeletonProps?: TextSkeletonProps) {
-    const [skeletonParams, setSkeletonParams] = useState<TextSkeletonParams>();
-    const textRef = useRef<HTMLElement>(null);
-
-    useLayoutEffect_SAFE_FOR_SSR(() => {
-        if (showSkeleton && textRef.current) {
-            const style = getComputedStyle(textRef.current);
-
-            const textHeight = textRef.current.offsetHeight;
-            const fontSize = parseInt(style.fontSize, 10);
-            const lineHeight = parseInt(style.lineHeight, 10);
-
-            const padding =
-                (lineHeight - fontSize) % 2 === 0
-                    ? (lineHeight - fontSize) / 2
-                    : (lineHeight - fontSize - 1) / 2;
-
-            const rows = skeletonProps?.rows
-                ? skeletonProps?.rows
-                : Math.ceil(textHeight / lineHeight);
-
-            setSkeletonParams({
-                height: lineHeight - padding * 2,
-                padding: `${padding}px 0`,
-                rows,
-            });
-        } else {
-            setSkeletonParams(undefined);
-        }
-    }, [showSkeleton, skeletonProps?.rows]);
-
-    const renderSkeleton = (props: SkeletonProps) => {
-        if (showSkeleton && skeletonParams) {
-            return (
-                <div
-                    className={cn(
-                        skeletonProps?.wrapperClassName,
-                        props.wrapperClassName,
-                        skeletonProps?.align && styles[skeletonProps.align],
-                    )}
-                    data-test-id={props.dataTestId}
-                >
-                    {[...Array(skeletonParams.rows)].map((_, idx) => {
-                        const width = Array.isArray(skeletonProps?.width)
-                            ? skeletonProps?.width[idx]
-                            : skeletonProps?.width;
-
-                        return (
-                            // eslint-disable-next-line react/no-array-index-key
-                            <div key={idx} style={{ width, padding: skeletonParams.padding }}>
-                                <Skeleton visible={true} className={styles.skeletonText}>
-                                    <div style={{ height: skeletonParams.height }} />
-                                </Skeleton>
-                            </div>
-                        );
-                    })}
-                </div>
-            );
-        }
-
-        return null;
-    };
-
-    return { renderSkeleton, textRef };
-}