# All files / transition skeletonPlaceholderUtils.ts

0% Statements 0/105
0% Branches 0/1
0% Functions 0/1
0% Lines 0/105

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106

     import { type CSSProperties } from "react";
    import { bem } from "../utils/bem.js";
    import { randomInt } from "../utils/randomInt.js";

    /**
     * @remarks \@since 6.0.0
     */
    export const skeletonPlaceholder = bem("rmd-skeleton-placeholder");

    /**
     * @remarks \@since 6.0.0
     */
    export interface SkeletonPlaceholderRandomOptions {
      /**
       * The minimum `animation-delay` milliseconds allowed in the random generator.
       * This value should be: `0 <= minDelay < maxDelay`.
       *
       * The `animation-delay` will be generated by:
       * ```ts
       * const delay = randomInt({
       *   min: minDelay,
       *   max: maxDelay,
       * });
       *
       * return {
       *   animationDelay: `-${delay}ms`,
       * };
       * ```
       *
       * @defaultValue `0`
       */
      minDelay?: number;

      /**
       * @see {@link minDelay}
       * @defaultValue `400`
       */
      maxDelay?: number;

      /**
       * The minimum width percentage allowed in the random generator. This value
       * should be: `0 >= minPercentage < maxPercentage`.
       *
       * The `width` will be generated by:
       * ```ts
       * const width = randomInt({
       *   min: minPercentage,
       *   max: maxPercentage,
       * });
       *
       * return {
       *   width: `${width}%`,
       * };
       * ```
       * @defaultValue `40`
       */
      minPercentage?: number;

      /**
       * @see {@link minPercentage}
       * @defaultValue `85`
       */
      maxPercentage?: number;
    }

    /**
     * A server-only safe util to generate a random skeleton placeholder.
     *
     * @example
     * ```tsx
     * import { skeletonPlaceholder, randomSkeletonPlaceholder } from "@react-md/core";
     * import "server-only";
     *
     * export function RandomSkeletonPlaceholder(): ReactElement {
     *   return
     *     <div
     *       style={randomSkeletonPlaceholder()}
     *       className={skeletonPlaceholder()}
     *     />
     *   );
     * }
     * ```
     * @remarks \@since 6.0.0
     */
    export function randomSkeletonPlaceholder(
      options: SkeletonPlaceholderRandomOptions = {}
    ): CSSProperties {
      const {
        minDelay = 0,
        maxDelay = 400,
        minPercentage = 40,
        maxPercentage = 85,
      } = options;

      return {
        animationDelay: `-${randomInt({
          min: minDelay,
          max: maxDelay,
        })}ms`,
        width: `${randomInt({
          min: minPercentage,
          max: maxPercentage,
        })}%`,
      };
    }