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

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

var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var Textarea_exports = {};
__export(Textarea_exports, {
  Textarea: () => Textarea
});
module.exports = __toCommonJS(Textarea_exports);
var import_jsx_runtime = require("react/jsx-runtime");
var import_react_native = require("react-native");
var import_react = require("react");
var import_form = require("../styles/form");
var import_styled = require("@crossed/styled");
var import_Form = require("./Form");
var import_CloseButton = require("../buttons/CloseButton");
var import_core = require("@crossed/core");
var import_XBox = require("../layout/XBox");
var import_Text = require("../typography/Text");
var import_YBox = require("../layout/YBox");
const Textarea = (0, import_react.forwardRef)(
  ({
    error,
    label,
    clearable,
    defaultValue,
    value: valueProps,
    onChangeText,
    disabled,
    elementRight,
    elementLeft,
    description,
    extra,
    ...props
  }, ref) => {
    const [value, setValue] = (0, import_core.useUncontrolled)({
      value: valueProps,
      defaultValue,
      onChange: onChangeText
    });
    const [elementLeftWidth, setElementLeftWidth] = (0, import_react.useState)(0);
    const [elementRightWidth, setElementRightWidth] = (0, import_react.useState)(0);
    const { state, props: propsInteraction } = (0, import_styled.useInteraction)(props);
    const { color } = import_form.form.placeholder.style().style;
    const onClear = (0, import_react.useCallback)(() => {
      setValue("");
    }, [setValue]);
    const showClear = clearable && value;
    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Form.FormField, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_YBox.YBox, { space: "xxs", children: [
      (label || description || extra) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_XBox.XBox, { alignItems: "center", space: "xxs", children: [
        label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Form.FormLabel, { children: label }),
        description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.Text, { style: import_form.form.labelDescription, children: description }),
        extra && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.Text, { style: import_form.form.labelExtra, textAlign: "right", children: extra })
      ] }),
      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_XBox.XBox, { children: [
        elementLeft && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
          import_XBox.XBox,
          {
            style: import_form.form.elementLeft,
            onLayout: ({ nativeEvent: { layout } }) => setElementLeftWidth(layout.width),
            children: elementLeft
          }
        ),
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Form.FormControl, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
          import_react_native.TextInput,
          {
            ref,
            placeholderTextColor: color,
            cursorColor: color,
            editable: !disabled,
            multiline: true,
            numberOfLines: 10,
            ...props,
            ...propsInteraction,
            ...(0, import_styled.composeStyles)(import_form.form.input, error && import_form.form.inputError).rnw({
              ...props,
              ...state,
              disabled,
              style: [
                { minHeight: 88, textAlignVertical: "top" },
                props.style,
                elementLeftWidth && { paddingLeft: elementLeftWidth },
                elementRightWidth && { paddingRight: elementRightWidth }
              ]
            }),
            value,
            onChangeText: setValue
          }
        ) }),
        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
          import_XBox.XBox,
          {
            style: import_form.form.elementRight,
            onLayout: ({ nativeEvent: { layout } }) => setElementRightWidth(layout.width),
            children: [
              showClear && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_CloseButton.CloseButton, { onPress: onClear }),
              elementRight
            ]
          }
        )
      ] }),
      error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.Text, { color: "error", children: error.toString() })
    ] }) });
  }
);
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  Textarea
});
//# sourceMappingURL=Textarea.js.map