@crossed/ui/lib/module/forms/Textarea.js

A universal & performant styling library for React Native, Next.js & React

import { jsx, jsxs } from "react/jsx-runtime";
import { TextInput } from "react-native";
import { forwardRef, useCallback, useState } from "react";
import { form } from "../styles/form";
import { composeStyles, useInteraction } from "@crossed/styled";
import { FormControl, FormField, FormLabel } from "./Form";
import { CloseButton } from "../buttons/CloseButton";
import { useUncontrolled } from "@crossed/core";
import { XBox } from "../layout/XBox";
import { Text } from "../typography/Text";
import { YBox } from "../layout/YBox";
const Textarea = forwardRef(
  ({
    error,
    label,
    clearable,
    defaultValue,
    value: valueProps,
    onChangeText,
    disabled,
    elementRight,
    elementLeft,
    description,
    extra,
    ...props
  }, ref) => {
    const [value, setValue] = useUncontrolled({
      value: valueProps,
      defaultValue,
      onChange: onChangeText
    });
    const [elementLeftWidth, setElementLeftWidth] = useState(0);
    const [elementRightWidth, setElementRightWidth] = useState(0);
    const { state, props: propsInteraction } = useInteraction(props);
    const { color } = form.placeholder.style().style;
    const onClear = useCallback(() => {
      setValue("");
    }, [setValue]);
    const showClear = clearable && value;
    return /* @__PURE__ */ jsx(FormField, { children: /* @__PURE__ */ jsxs(YBox, { space: "xxs", children: [
      (label || description || extra) && /* @__PURE__ */ jsxs(XBox, { alignItems: "center", space: "xxs", children: [
        label && /* @__PURE__ */ jsx(FormLabel, { children: label }),
        description && /* @__PURE__ */ jsx(Text, { style: form.labelDescription, children: description }),
        extra && /* @__PURE__ */ jsx(Text, { style: form.labelExtra, textAlign: "right", children: extra })
      ] }),
      /* @__PURE__ */ jsxs(XBox, { children: [
        elementLeft && /* @__PURE__ */ jsx(
          XBox,
          {
            style: form.elementLeft,
            onLayout: ({ nativeEvent: { layout } }) => setElementLeftWidth(layout.width),
            children: elementLeft
          }
        ),
        /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
          TextInput,
          {
            ref,
            placeholderTextColor: color,
            cursorColor: color,
            editable: !disabled,
            multiline: true,
            numberOfLines: 10,
            ...props,
            ...propsInteraction,
            ...composeStyles(form.input, error && form.inputError).rnw({
              ...props,
              ...state,
              disabled,
              style: [
                { minHeight: 88, textAlignVertical: "top" },
                props.style,
                elementLeftWidth && { paddingLeft: elementLeftWidth },
                elementRightWidth && { paddingRight: elementRightWidth }
              ]
            }),
            value,
            onChangeText: setValue
          }
        ) }),
        /* @__PURE__ */ jsxs(
          XBox,
          {
            style: form.elementRight,
            onLayout: ({ nativeEvent: { layout } }) => setElementRightWidth(layout.width),
            children: [
              showClear && /* @__PURE__ */ jsx(CloseButton, { onPress: onClear }),
              elementRight
            ]
          }
        )
      ] }),
      error && /* @__PURE__ */ jsx(Text, { color: "error", children: error.toString() })
    ] }) });
  }
);
export {
  Textarea
};
//# sourceMappingURL=Textarea.js.map