# All files / form ResizingTextArea.tsx

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

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
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120

     "use client";
    import { forwardRef, type HTMLAttributes } from "react";
    import { type PropsWithRef } from "../types.js";
    import { ResizingTextAreaWrapper } from "./ResizingTextAreaWrapper.js";
    import { SimpleTextArea, type SimpleTextAreaProps } from "./SimpleTextArea.js";
    import { useResizingTextArea } from "./useResizingTextArea2.js";

    /**
     * @remarks \@since 6.0.0 Split up the component so that the resizing behavior
     * does not always need to be included on the client.
     */
    export interface TextAreaProps extends SimpleTextAreaProps {
      /**
       * The maximum number of rows a textarea can expand to before showing a
       * scrollbar. When this is set to `-1`, there will be no limit.
       *
       * @defaultValue `-1`
       */
      maxRows?: number;

      /**
       * Set this to `true` if the auto resizing textarea should not animate for new
       * height changes.
       *
       * @defaultValue `false`
       */
      disableTransition?: boolean;

      /**
       * This prop can be used to add any additional styling or props to the div
       * that surrounds the `<textarea>`, `<label>`, and `<textarea> (mask)`.
       */
      resizeContainerProps?: PropsWithRef<
        HTMLAttributes<HTMLDivElement>,
        HTMLDivElement
      >;
    }

    /**
     * **Client Component**
     *
     * @example
     * Simple Example
     * ```tsx
     * import { TextArea } from "@react-md/core";
     * import type { ReactElement } from "react";
     *
     * function Example(): ReactElement {
     *   return (
     *     <TextArea
     *       label="Label"
     *       placeholder="Placeholder"
     *     />
     *   );
     * }
     * ```
     */
    export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
      function TextArea(props, ref) {
        const {
          maxRows = -1,
          onChange: propOnChange,
          disableTransition: propDisableTransition,
          containerProps,
          resizeContainerProps,
          ...remaining
        } = props;
        const { areaStyle, areaClassName, value, defaultValue } = props;

        const {
          maskRef,
          containerRef,
          height,
          onChange,
          scrollable,
          disableTransition,
        } = useResizingTextArea({
          maxRows,
          onChange: propOnChange,
          containerRef: containerProps?.ref,
          disableTransition: propDisableTransition,
        });

        return (
          <SimpleTextArea
            {...remaining}
            ref={ref}
            height={!!height}
            animate={!disableTransition}
            scrollable={scrollable}
            onChange={onChange}
            containerProps={{
              ...containerProps,
              ref: containerRef,
              style: {
                ...containerProps?.style,
                "--rmd-textarea-height": height,
              },
            }}
            resize="auto"
          >
            {({ id, rows, children }) => (
              <ResizingTextAreaWrapper
                {...resizeContainerProps}
                maskId={`${id}-mask`}
                maskRef={maskRef}
                rows={rows}
                areaStyle={areaStyle}
                areaClassName={areaClassName}
                defaultValue={value ?? defaultValue}
                disableTransition={disableTransition}
              >
                {children}
              </ResizingTextAreaWrapper>
            )}
          </SimpleTextArea>
        );
      }
    );