react-elegant-ui/esm/components/Textinput/Textinput.js

Elegant UI components, made by BEM best practices for react

var __assign = this && this.__assign || function () {
  __assign = Object.assign || function (t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
      s = arguments[i];
      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
    }
    return t;
  };
  return __assign.apply(this, arguments);
};
var __rest = this && this.__rest || function (s, e) {
  var t = {};
  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  }
  return t;
};
import React, { useMemo } from 'react';
import { cn } from '@bem-react/classname';
import { useComponentRegistry } from '../../lib/di';
import { makeChain } from '../../lib/makeChain';
import './Textinput.css';
export var cnTextinput = cn('Textinput');
export var Textinput = function (_a) {
  var value = _a.value,
    onChange = _a.onChange,
    setValue = _a.setValue,
    disabled = _a.disabled,
    placeholder = _a.placeholder,
    spellCheck = _a.spellCheck,
    onInputText = _a.onInputText,
    addonBeforeControl = _a.addonBeforeControl,
    addonAfterControl = _a.addonAfterControl,
    iconLeft = _a.iconLeft,
    iconRight = _a.iconRight,
    hint = _a.hint,
    state = _a.state,
    className = _a.className,
    innerRef = _a.innerRef,
    controlProps = _a.controlProps,
    props = __rest(_a, ["value", "onChange", "setValue", "disabled", "placeholder", "spellCheck", "onInputText", "addonBeforeControl", "addonAfterControl", "iconLeft", "iconRight", "hint", "state", "className", "innerRef", "controlProps"]);
  // Prevent rerender due to use spread
  var controlPropsMix = useMemo(function () {
    return __assign(__assign({
      value: value,
      disabled: disabled,
      placeholder: placeholder,
      spellCheck: spellCheck
    }, controlProps), {
      onChange: makeChain(controlProps === null || controlProps === void 0 ? void 0 : controlProps.onChange, onChange, function (evt) {
        if (onInputText === undefined) return;
        onInputText(evt.target.value);
      })
    });
  }, [value, disabled, placeholder, spellCheck, controlProps, onChange, onInputText]);
  var _b = useComponentRegistry(cnTextinput()),
    Wrap = _b.Wrap,
    Control = _b.Control,
    Icon = _b.Icon,
    Box = _b.Box,
    Hint = _b.Hint;
  return /*#__PURE__*/React.createElement("div", __assign({}, props, {
    className: cnTextinput({
      state: state,
      disabled: disabled
    }, [className]),
    ref: innerRef
  }), /*#__PURE__*/React.createElement(Wrap, null, iconLeft && /*#__PURE__*/React.createElement(Icon, {
    side: "left",
    component: iconLeft
  }), addonBeforeControl, /*#__PURE__*/React.createElement(Control, __assign({}, controlPropsMix)), addonAfterControl, iconRight && /*#__PURE__*/React.createElement(Icon, {
    side: "right",
    component: iconRight
  }), /*#__PURE__*/React.createElement(Box, null)), hint && /*#__PURE__*/React.createElement(Hint, null, hint));
};
Textinput.displayName = cnTextinput();