@unoff/ui 1.21.0

package/dist/components/inputs/input/Input.js

@@ -0,0 +1,713 @@
+import '../../../assets/Input.css';
+import { jsxs as h, jsx as p } from "react/jsx-runtime";
+import T from "react";
+import m from "../../tags/tooltip/Tooltip.js";
+import y from "../../tags/icon-chip/IconChip.js";
+import x from "../../tags/chip/Chip.js";
+import { Icon as V } from "../../assets/icon/Icon.js";
+import S from "../../actions/button/Button.js";
+import { t as f } from "../../../do-classnames-DSDFCvzy.js";
+class B extends T.Component {
+  inputRef;
+  textareaRef;
+  static defaultProps = {
+    icon: void 0,
+    state: "DEFAULT",
+    step: "1",
+    shouldBlur: !1,
+    isClearable: !1,
+    isFramed: !0,
+    canBeEmpty: !0,
+    isBlocked: !1,
+    isDisabled: !1,
+    isNew: !1,
+    isAutoFocus: !1,
+    isGrowing: !1,
+    isFlex: !1
+  };
+  constructor(t) {
+    super(t), this.state = {
+      inputValue: t.value,
+      lastValidValue: t.value,
+      colorValue: t.value,
+      lastValidColorValue: t.value,
+      isTooltipVisible: !1
+    }, this.inputRef = T.createRef(), this.textareaRef = T.createRef();
+  }
+  componentDidMount() {
+    const { isGrowing: t } = this.props;
+    this.textareaRef.current && (this.textareaRef.current.style.height = "auto", t && (this.textareaRef.current.style.height = `${this.textareaRef.current.scrollHeight + 2}px`));
+    const { isAutoFocus: i } = this.props;
+    i && setTimeout(() => {
+      this.inputRef.current ? this.inputRef.current.focus() : this.textareaRef.current && this.textareaRef.current.focus();
+    }, 1);
+  }
+  componentDidUpdate(t) {
+    const { value: i, isGrowing: a } = this.props;
+    t.value !== i && this.setState({
+      inputValue: i,
+      colorValue: i
+    }), t.type === "CODE" && this.textareaRef.current !== null && (this.textareaRef.current.scrollTop = 0), this.textareaRef.current && (this.textareaRef.current.style.height = "auto", a && (this.textareaRef.current.style.height = `${this.textareaRef.current.scrollHeight + 2}px`));
+  }
+  // Handlers
+  onPickColorValue = (t) => {
+    const { onPick: i } = this.props, a = t.target.value;
+    this.setState({
+      inputValue: a,
+      colorValue: a,
+      lastValidColorValue: a
+    }), i && i(t);
+  };
+  onChangeColorValue = (t) => {
+    const { onChange: i } = this.props;
+    this.setState({
+      inputValue: t.target.value
+    }), i && i(t);
+  };
+  onChangeNumber = (t) => {
+    const { onChange: i } = this.props;
+    this.setState({
+      inputValue: t.target.value
+    }), i && i(t);
+  };
+  onChangeText = (t) => {
+    const { onChange: i } = this.props;
+    this.setState({
+      inputValue: t.target.value
+    }), i && i(t);
+  };
+  onFocus = (t) => {
+    const { value: i, onFocus: a, canBeEmpty: e, type: r } = this.props, s = (r === "TEXT" || r === "LONG_TEXT") && !e && i.trim() === "";
+    a && !s && a(t);
+  };
+  onBlur = (t) => {
+    const { shouldBlur: i, onBlur: a, canBeEmpty: e, type: r, min: s, max: l } = this.props, { inputValue: n, lastValidValue: o, lastValidColorValue: d } = this.state;
+    if (r === "NUMBER") {
+      const c = n.trim() === "";
+      let u;
+      if (parseFloat(n) < parseFloat(s ?? "0") ? u = s ?? "0" : parseFloat(n) > parseFloat(l ?? "100") ? u = l ?? "100" : c ? (u = o, this.setState({
+        inputValue: u
+      })) : u = n, this.setState({
+        inputValue: u ?? n,
+        lastValidValue: u ?? n
+      }), u !== o && a || i && a) {
+        const g = {
+          ...t,
+          target: {
+            ...t.target,
+            value: u,
+            closest: t.target.closest?.bind(t.target),
+            getAttribute: t.target.getAttribute?.bind(t.target),
+            querySelector: t.target.querySelector?.bind(t.target),
+            querySelectorAll: t.target.querySelectorAll?.bind(t.target),
+            matches: t.target.matches?.bind(t.target),
+            contains: t.target.contains?.bind(t.target),
+            classList: t.target.classList,
+            dataset: t.target.dataset
+          },
+          currentTarget: {
+            ...t.currentTarget,
+            value: u,
+            closest: t.currentTarget.closest?.bind(t.currentTarget),
+            getAttribute: t.currentTarget.getAttribute?.bind(t.currentTarget),
+            querySelector: t.currentTarget.querySelector?.bind(t.currentTarget),
+            querySelectorAll: t.currentTarget.querySelectorAll?.bind(
+              t.currentTarget
+            ),
+            matches: t.currentTarget.matches?.bind(t.currentTarget),
+            contains: t.currentTarget.contains?.bind(t.currentTarget),
+            classList: t.currentTarget.classList,
+            dataset: t.currentTarget.dataset
+          }
+        };
+        a(
+          g
+        );
+        return;
+      }
+    }
+    if (r === "COLOR") {
+      const c = this.transformColorCode(t.target.value);
+      if (this.setState({
+        inputValue: c,
+        colorValue: c,
+        lastValidColorValue: c
+      }), c !== d && a !== void 0 || i && a !== void 0) {
+        const u = {
+          ...t,
+          target: {
+            ...t.target,
+            value: c,
+            closest: t.target.closest?.bind(t.target),
+            getAttribute: t.target.getAttribute?.bind(t.target),
+            querySelector: t.target.querySelector?.bind(t.target),
+            querySelectorAll: t.target.querySelectorAll?.bind(t.target),
+            matches: t.target.matches?.bind(t.target),
+            contains: t.target.contains?.bind(t.target),
+            classList: t.target.classList,
+            dataset: t.target.dataset
+          },
+          currentTarget: {
+            ...t.currentTarget,
+            value: c,
+            closest: t.currentTarget.closest?.bind(t.currentTarget),
+            getAttribute: t.currentTarget.getAttribute?.bind(t.currentTarget),
+            querySelector: t.currentTarget.querySelector?.bind(t.currentTarget),
+            querySelectorAll: t.currentTarget.querySelectorAll?.bind(
+              t.currentTarget
+            ),
+            matches: t.currentTarget.matches?.bind(t.currentTarget),
+            contains: t.currentTarget.contains?.bind(t.currentTarget),
+            classList: t.currentTarget.classList,
+            dataset: t.currentTarget.dataset
+          }
+        };
+        a(
+          u
+        );
+        return;
+      }
+    }
+    if (r === "TEXT" || r === "LONG_TEXT") {
+      const c = n.trim() === "";
+      if ((r === "TEXT" || r === "LONG_TEXT") && !e && c) {
+        this.setState({
+          inputValue: o
+        });
+        return;
+      }
+      if (this.setState({
+        lastValidValue: n
+      }), n !== o && a || i && a) {
+        a(t);
+        return;
+      }
+    }
+  };
+  // Direct Actions
+  onValidText = (t) => {
+    const { onValid: i } = this.props, a = t.target;
+    t.key === "Enter" ? (i !== void 0 && i(t), a.blur()) : t.key === "Escape" && a.blur();
+  };
+  onValidLongText = (t) => {
+    const { onValid: i } = this.props, a = t.target;
+    (t.ctrlKey || t.metaKey) && t.key === "Enter" ? (i !== void 0 && i(t), a.blur()) : t.key === "Escape" && a.blur();
+  };
+  onValidNumber = (t) => {
+    const { min: i, max: a, step: e, onShift: r } = this.props, { inputValue: s } = this.state, l = t.target;
+    let n = 0;
+    if (t.key === "ArrowUp") {
+      t.shiftKey && (n = 9);
+      const o = parseFloat(s) + n < parseFloat(a ?? "100") ? (parseFloat(s) + n * parseFloat(e === void 0 ? "1" : e)).toString() : a ?? "100";
+      this.setState({
+        inputValue: o,
+        lastValidValue: o
+      }), parseFloat(s) + n < parseFloat(a ?? "100") && r?.(t);
+    } else if (t.key === "ArrowDown") {
+      t.shiftKey && (n = 9);
+      const o = parseFloat(s) - n > parseFloat(i ?? "0") ? (parseFloat(s) - n * parseFloat(e === void 0 ? "1" : e)).toString() : i ?? "0";
+      this.setState({
+        inputValue: o,
+        lastValidValue: o
+      }), parseFloat(s) - n > parseFloat(i ?? "0") && r?.(t);
+    } else (t.key === "Enter" || t.key === "Escape") && (parseFloat(s) < parseFloat(i ?? "0") ? this.setState({
+      inputValue: i ?? "0"
+    }) : parseFloat(s) > parseFloat(a ?? "100") && this.setState({
+      inputValue: a ?? "100"
+    }), l.blur());
+  };
+  onValidColor = (t) => {
+    const { onValid: i } = this.props, a = t.target;
+    t.key === "Enter" ? (i !== void 0 && i(t), a.blur()) : t.key === "Escape" && a.blur();
+  };
+  doClear = () => this.setState({ inputValue: "" });
+  onGrab = () => {
+    this.inputRef.current && this.inputRef.current.focus(), document.addEventListener("mousemove", this.onDrag);
+  };
+  onDrag = (t) => {
+    this.inputRef.current && this.inputRef.current.focus();
+    const { min: i, max: a, onSlide: e } = this.props, { inputValue: r } = this.state, s = parseFloat(i ?? "0"), l = parseFloat(a ?? "100"), o = parseFloat(r) + t.movementX;
+    if (o >= s && o <= l && (this.setState({
+      inputValue: o.toString()
+    }), this.inputRef.current)) {
+      const d = new Event("input", { bubbles: !0 });
+      Object.defineProperty(d, "target", {
+        value: this.inputRef.current,
+        enumerable: !0
+      }), Object.defineProperty(d, "currentTarget", {
+        value: this.inputRef.current,
+        enumerable: !0
+      }), e?.(d);
+    }
+    document.body.style.setProperty("cursor", "ew-resize", "important"), this.inputRef.current?.style.setProperty("cursor", "ew-resize", "important"), document.addEventListener("mouseup", () => {
+      document.removeEventListener("mousemove", this.onDrag), document.body.style.cursor = "", this.inputRef.current && (this.inputRef.current.style.cursor = "");
+    });
+  };
+  transformColorCode = (t) => {
+    const { lastValidColorValue: i } = this.state, e = (t.startsWith("#") ? t.substring(1) : t).toLowerCase().split("").filter((s) => /[0-9a-f]/i.test(s));
+    if (e.length === 0) return i;
+    if (e.length >= 6) return `#${e.slice(0, 6).join("")}`;
+    let r = "";
+    switch (e.length) {
+      case 1:
+        r = e[0].repeat(6);
+        break;
+      case 2:
+        r = `${e.join("")}`.repeat(3);
+        break;
+      case 3:
+        r = `${e[0]}${e[0]}${e[1]}${e[1]}${e[2]}${e[2]}`;
+        break;
+      case 4:
+        r = `${e[0]}${e[0]}${e[1]}${e[1]}${e[2]}${e[2]}`;
+        break;
+      case 5:
+        r = `${e[0]}${e[0]}${e[1]}${e[1]}${e[2]}${e[2]}`;
+        break;
+      default:
+        r = e.slice(0, 6).join("");
+    }
+    return r.indexOf("#") !== 0 && (r = `#${r}`), r.toLowerCase();
+  };
+  // Templates
+  Status = () => {
+    const { warning: t, preview: i, isBlocked: a, isNew: e, onUnblock: r } = this.props;
+    if (t || a || e)
+      return /* @__PURE__ */ h("div", { className: "input__status", children: [
+        t !== void 0 && /* @__PURE__ */ p(
+          y,
+          {
+            iconType: "PICTO",
+            iconName: "warning",
+            text: t.label,
+            pin: t.pin,
+            type: t.type
+          }
+        ),
+        (a || e) && /* @__PURE__ */ p(
+          x,
+          {
+            preview: i,
+            isSolo: !0,
+            action: a ? r : void 0,
+            children: e ? "New" : "Pro"
+          }
+        )
+      ] });
+  };
+  Color = () => {
+    const { id: t, feature: i, helper: a, isBlocked: e, isDisabled: r, onBlur: s } = this.props, { inputValue: l, colorValue: n, isTooltipVisible: o } = this.state;
+    return /* @__PURE__ */ h(
+      "div",
+      {
+        className: f([
+          "input",
+          "input--color",
+          "input--with-color",
+          e && "input--blocked"
+        ]),
+        role: "group",
+        children: [
+          /* @__PURE__ */ h(
+            "div",
+            {
+              className: "input__wrapper",
+              onMouseEnter: () => {
+                a !== void 0 && this.setState({ isTooltipVisible: !0 });
+              },
+              onMouseLeave: () => {
+                a !== void 0 && this.setState({ isTooltipVisible: !1 });
+              },
+              children: [
+                /* @__PURE__ */ p(
+                  "input",
+                  {
+                    id: t,
+                    "data-feature": i,
+                    type: "color",
+                    className: "input__color",
+                    value: n,
+                    disabled: r || e,
+                    "aria-label": "Color picker",
+                    "aria-disabled": r || e,
+                    onChange: r || e ? void 0 : this.onPickColorValue,
+                    onBlur: r || e ? void 0 : s,
+                    ref: this.inputRef
+                  }
+                ),
+                /* @__PURE__ */ p(
+                  "input",
+                  {
+                    role: "textbox",
+                    id: t,
+                    "data-feature": i,
+                    type: "text",
+                    className: "input__field",
+                    value: l.toUpperCase().replace("#", ""),
+                    maxLength: 7,
+                    disabled: r || e,
+                    "aria-label": "Hex color code",
+                    "aria-disabled": r || e,
+                    onChange: r || e ? void 0 : this.onChangeColorValue,
+                    onFocus: (d) => {
+                      d.target.select(), this.onFocus(d);
+                    },
+                    onKeyDown: r || e ? void 0 : this.onValidColor,
+                    onBlur: r || e ? void 0 : this.onBlur,
+                    ref: this.inputRef
+                  }
+                ),
+                o && a !== void 0 && /* @__PURE__ */ p(
+                  m,
+                  {
+                    pin: a?.pin || "BOTTOM",
+                    type: a?.type || "SINGLE_LINE",
+                    children: a?.label
+                  }
+                )
+              ]
+            }
+          ),
+          this.Status()
+        ]
+      }
+    );
+  };
+  Number = () => {
+    const {
+      id: t,
+      icon: i,
+      unit: a,
+      min: e,
+      max: r,
+      step: s,
+      helper: l,
+      feature: n,
+      isBlocked: o,
+      isDisabled: d,
+      isFlex: c,
+      onSlide: u
+    } = this.props, { inputValue: g, isTooltipVisible: v } = this.state;
+    return /* @__PURE__ */ h(
+      "div",
+      {
+        className: f([
+          "input",
+          "input--number",
+          i !== void 0 && "input--with-icon",
+          c && "input--flex",
+          o && "input--blocked"
+        ]),
+        role: "group",
+        children: [
+          /* @__PURE__ */ h(
+            "div",
+            {
+              className: "input__wrapper",
+              onMouseEnter: () => {
+                l !== void 0 && this.setState({ isTooltipVisible: !0 });
+              },
+              onMouseLeave: () => {
+                l !== void 0 && this.setState({ isTooltipVisible: !1 });
+              },
+              children: [
+                i !== void 0 && /* @__PURE__ */ p(
+                  "div",
+                  {
+                    className: "input__icon",
+                    style: {
+                      cursor: typeof u == "function" && !(d || o) ? "ew-resize" : "default"
+                    },
+                    onMouseDown: () => {
+                      typeof u == "function" && !(d || o) && this.onGrab();
+                    },
+                    children: /* @__PURE__ */ p(
+                      V,
+                      {
+                        type: i?.type,
+                        iconName: i?.value,
+                        iconLetter: i?.value
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ p(
+                  "input",
+                  {
+                    role: "spinbutton",
+                    id: t,
+                    "data-feature": n,
+                    type: "number",
+                    className: f([
+                      "input__field",
+                      c && "input__field--flex",
+                      a !== void 0 && "input__field--unit"
+                    ]),
+                    value: g,
+                    min: e,
+                    max: r,
+                    step: s,
+                    disabled: d || o,
+                    "aria-label": `Number input${a ? ` in ${a}` : ""}${i ? ` with ${i.value} icon` : ""}`,
+                    "aria-valuemin": e ? parseFloat(e) : void 0,
+                    "aria-valuemax": r ? parseFloat(r) : void 0,
+                    "aria-valuenow": parseFloat(g),
+                    "aria-disabled": d || o,
+                    onKeyDown: d || o ? void 0 : this.onValidNumber,
+                    onChange: d || o ? void 0 : this.onChangeNumber,
+                    onFocus: (b) => {
+                      b.target.select(), d || o || this.onFocus(b);
+                    },
+                    onBlur: d || o ? void 0 : this.onBlur,
+                    ref: this.inputRef
+                  }
+                ),
+                a !== void 0 && /* @__PURE__ */ p("div", { className: "input__unit", children: /* @__PURE__ */ p(
+                  V,
+                  {
+                    type: "LETTER",
+                    iconLetter: a
+                  }
+                ) }),
+                v && l !== void 0 && /* @__PURE__ */ p(
+                  m,
+                  {
+                    pin: l?.pin || "BOTTOM",
+                    type: l?.type || "SINGLE_LINE",
+                    children: l?.label
+                  }
+                )
+              ]
+            }
+          ),
+          this.Status()
+        ]
+      }
+    );
+  };
+  Text = () => {
+    const {
+      id: t,
+      icon: i,
+      state: a,
+      placeholder: e,
+      charactersLimit: r,
+      helper: s,
+      feature: l,
+      isClearable: n,
+      isFlex: o,
+      isFramed: d,
+      isBlocked: c,
+      isDisabled: u,
+      onClear: g
+    } = this.props, { inputValue: v, isTooltipVisible: b } = this.state;
+    return /* @__PURE__ */ h(
+      "div",
+      {
+        className: f([
+          "input",
+          "input--short-text",
+          i !== void 0 && "input--with-icon",
+          o && "input__field--flex",
+          c && "input--blocked"
+        ]),
+        role: "group",
+        children: [
+          /* @__PURE__ */ h(
+            "div",
+            {
+              className: "input__wrapper",
+              onMouseEnter: () => {
+                s !== void 0 && this.setState({ isTooltipVisible: !0 });
+              },
+              onMouseLeave: () => {
+                s !== void 0 && this.setState({ isTooltipVisible: !1 });
+              },
+              children: [
+                i !== void 0 && /* @__PURE__ */ p("div", { className: "input__icon", children: /* @__PURE__ */ p(
+                  V,
+                  {
+                    type: i?.type,
+                    iconName: i?.value,
+                    iconLetter: i?.value
+                  }
+                ) }),
+                /* @__PURE__ */ p(
+                  "input",
+                  {
+                    role: "textbox",
+                    id: t,
+                    "data-feature": l,
+                    type: "text",
+                    className: f([
+                      "input__field",
+                      !d && "input__field--no-frame",
+                      n && v.length > 0 && "input__field--clearable",
+                      a === "ERROR" && "input__field--error"
+                    ]),
+                    placeholder: e,
+                    value: v,
+                    maxLength: r,
+                    disabled: u || c,
+                    "aria-label": e || "Text input",
+                    "aria-invalid": a === "ERROR",
+                    "aria-disabled": u || c,
+                    onKeyDown: u || c ? void 0 : this.onValidText,
+                    onChange: u || c ? void 0 : this.onChangeText,
+                    onFocus: u || c ? void 0 : this.onFocus,
+                    onBlur: u || c ? void 0 : this.onBlur,
+                    ref: this.inputRef
+                  }
+                ),
+                n && v.length > 0 && !(u || c) && /* @__PURE__ */ p("div", { className: "input__clear", children: /* @__PURE__ */ p(
+                  S,
+                  {
+                    type: "icon",
+                    size: "small",
+                    icon: "close",
+                    action: () => {
+                      this.setState({ inputValue: "" }), g !== void 0 && g("");
+                    }
+                  }
+                ) }),
+                b && s !== void 0 && /* @__PURE__ */ p(
+                  m,
+                  {
+                    pin: s?.pin || "BOTTOM",
+                    type: s?.type || "SINGLE_LINE",
+                    children: s?.label
+                  }
+                )
+              ]
+            }
+          ),
+          this.Status()
+        ]
+      }
+    );
+  };
+  LongText = () => {
+    const { id: t, state: i, placeholder: a, helper: e, feature: r, isBlocked: s, isDisabled: l } = this.props, { inputValue: n, isTooltipVisible: o } = this.state;
+    return /* @__PURE__ */ h(
+      "div",
+      {
+        className: f([
+          "input",
+          "input--long-text",
+          s && "input--blocked"
+        ]),
+        role: "group",
+        children: [
+          /* @__PURE__ */ h(
+            "div",
+            {
+              className: "input__wrapper",
+              onMouseEnter: () => {
+                e !== void 0 && this.setState({ isTooltipVisible: !0 });
+              },
+              onMouseLeave: () => {
+                e !== void 0 && this.setState({ isTooltipVisible: !1 });
+              },
+              children: [
+                /* @__PURE__ */ p(
+                  "textarea",
+                  {
+                    role: "textbox",
+                    id: t,
+                    "data-feature": r,
+                    className: f([
+                      "textarea",
+                      "input__field",
+                      i === "ERROR" && "input__field--error"
+                    ]),
+                    rows: 1,
+                    placeholder: a,
+                    value: n,
+                    disabled: l || s,
+                    "aria-label": a || "Long text input",
+                    "aria-invalid": i === "ERROR",
+                    "aria-disabled": l || s,
+                    onKeyDown: l || s ? void 0 : this.onValidLongText,
+                    onChange: l || s ? void 0 : this.onChangeText,
+                    onFocus: l || s ? void 0 : this.onFocus,
+                    onBlur: l || s ? void 0 : this.onBlur,
+                    ref: this.textareaRef
+                  }
+                ),
+                o && e !== void 0 && /* @__PURE__ */ p(
+                  m,
+                  {
+                    pin: e?.pin || "BOTTOM",
+                    type: e?.type || "SINGLE_LINE",
+                    children: e?.label
+                  }
+                )
+              ]
+            }
+          ),
+          this.Status()
+        ]
+      }
+    );
+  };
+  CodeSnippet = () => {
+    const { id: t, value: i, helper: a, feature: e, isBlocked: r, isDisabled: s } = this.props;
+    return /* @__PURE__ */ h(
+      "div",
+      {
+        className: f([
+          "input",
+          "input--code",
+          r && "input--blocked"
+        ]),
+        role: "group",
+        children: [
+          /* @__PURE__ */ p(
+            "div",
+            {
+              className: "input__wrapper",
+              onMouseEnter: () => {
+                a !== void 0 && this.setState({ isTooltipVisible: !0 });
+              },
+              onMouseLeave: () => {
+                a !== void 0 && this.setState({ isTooltipVisible: !1 });
+              },
+              children: /* @__PURE__ */ p(
+                "textarea",
+                {
+                  role: "textbox",
+                  id: t,
+                  "data-feature": e,
+                  className: f([
+                    "textarea",
+                    "input__field",
+                    "textarea--monospace"
+                  ]),
+                  value: i,
+                  disabled: s || r,
+                  "aria-label": "Code snippet",
+                  "aria-disabled": s || r,
+                  onChange: s || r ? void 0 : this.onChangeText,
+                  onFocus: (l) => l.target.select(),
+                  onBlur: () => window.getSelection()?.removeAllRanges(),
+                  readOnly: !0,
+                  ref: this.textareaRef
+                }
+              )
+            }
+          ),
+          this.Status()
+        ]
+      }
+    );
+  };
+  // Render
+  render() {
+    const { type: t } = this.props;
+    return t === "NUMBER" ? this.Number() : t === "COLOR" ? this.Color() : t === "LONG_TEXT" ? this.LongText() : t === "CODE" ? this.CodeSnippet() : this.Text();
+  }
+}
+export {
+  B as default
+};
+//# sourceMappingURL=Input.js.map