ayongui/es/ayongui/components/input/index.mjs

import { j as e } from "../../../react/jsx-runtime.mjs";
import { useState as l, useRef as M, useMemo as U, useEffect as y } from "react";
import "../icon/index.module.less.mjs";
import W from "../icon/components/eyesopen-frame/index.mjs";
import q from "../icon/components/eyes-frame/index.mjs";
import D from "../icon/components/wrongs-frame/index.mjs";
import "../icon/components/loading-frame/loading.module.less.mjs";
import n from "./index.module.less.mjs";
const w = (p) => {
  const {
    value: i = "",
    disabled: u,
    type: a = "text",
    className: d = "",
    style: m = {},
    defaultValue: f = "",
    addonBefore: o = null,
    addonAfter: c = null,
    placeholder: B = "请输入值",
    prefix: x = null,
    suffix: h = null,
    clerabled: j = !1,
    size: E = "normal",
    maxLength: C = null,
    visibilityToggle: s = {
      visible: !1,
      iconRender: null,
      onVisibleChange: () => {
      }
    },
    onFocus: I = () => {
    },
    onBlur: V = () => {
    },
    onKeyUp: $ = () => {
    },
    onChange: A = (t) => {
    },
    onChangeBefore: R = (t) => {
    }
  } = p, [v, g] = l(i || f);
  l("");
  const O = `${n.ayongInput} ${d} ${n[E]}
    ${n[a]} ${u && n.notAllowed} ${(o || c) && n.addonBeforeAfter}`;
  l("5px"), l(!1);
  const [r, N] = l(!1);
  M(!0);
  const P = U(() => (s.onVisibleChange && s.onVisibleChange(r), a == "Password" && r ? "text" : a === "Password" ? "password" : a), [r]), S = () => {
    N(!r);
  };
  y(() => {
    N(s == null ? void 0 : s.visible);
  }, [s == null ? void 0 : s.visible]);
  const _ = () => {
    g("");
  }, F = (t) => {
    C && t.target.value.length > C || R(t.target.value) || (g(t.target.value), A(t.target.value));
  }, k = (t) => {
    V(t.target.value);
  }, [z, b] = l(!1), K = () => {
    b(!0);
  }, L = () => {
    b(!1);
  };
  return y(() => {
  }, [z]), y(() => {
    g(() => i);
  }, [i]), /* @__PURE__ */ e.jsxs(
    "div",
    {
      className: n.warp,
      style: { ...m, padding: (x || h || a === "Password" || j) && "0 5px" },
      children: [
        ["string", "number"].includes(typeof o) && /* @__PURE__ */ e.jsxs("span", { className: n.lable, children: [
          " ",
          o,
          " "
        ] }),
        typeof o == "function" && /* @__PURE__ */ e.jsxs("span", { className: n.lableFunction, children: [
          " ",
          o(),
          "  "
        ] }),
        x && /* @__PURE__ */ e.jsx("span", { children: x }),
        /* @__PURE__ */ e.jsx(
          "input",
          {
            type: P,
            disabled: u,
            onBlur: k,
            maxLength: C,
            onKeyUp: $,
            onFocus: I,
            value: v,
            onChange: F,
            placeholder: B,
            className: O,
            onCompositionStart: K,
            onCompositionEnd: L
          }
        ),
        h && /* @__PURE__ */ e.jsx("span", { className: n.iconBox, children: h }),
        j && v && /* @__PURE__ */ e.jsx("span", { onClick: _, className: n.iconBox, children: /* @__PURE__ */ e.jsx(D, {}) }),
        a === "Password" && /* @__PURE__ */ e.jsx("span", { className: n.iconBox, onClick: S, children: typeof s.iconRender == "function" ? s.iconRender(r) : r ? /* @__PURE__ */ e.jsx(W, {}) : /* @__PURE__ */ e.jsx(q, {}) }),
        ["string", "number"].includes(typeof c) && /* @__PURE__ */ e.jsxs("span", { className: n.lable, children: [
          " ",
          c,
          " "
        ] }),
        typeof c == "function" && /* @__PURE__ */ e.jsxs("span", { className: n.lableFunction, children: [
          " ",
          c(),
          "  "
        ] })
      ]
    }
  );
}, G = ({
  style: p,
  value: i = "",
  defaultValue: u = "",
  onChange: a = () => {
  }
}) => {
  const [d, m] = l(i || u), f = (o) => {
    m(o.target.value), a(o.target.value);
  };
  return /* @__PURE__ */ e.jsx("textarea", { className: n.warp, value: d, style: p, onChange: f });
};
w.TextArea = G;
w.displayName = "Input";
export {
  w as default
};