@trellixio/roaster-coffee/cjs/components/TextField/TextField.js

Beans' product component library

'use strict';

var React = require('react');
var index$1 = require('../../utils/classNames/index.js');
var index = require('../../utils/useUid/index.js');
require('@floating-ui/react');

function _interopNamespaceDefault(e) {
  var n = Object.create(null);
  if (e) {
    for (var k in e) {
      n[k] = e[k];
    }
  }
  n.default = e;
  return Object.freeze(n);
}

var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);

const TextField = React__namespace.forwardRef((props, ref) => {
  const {
    id,
    label,
    error,
    prefix,
    suffix,
    onChange,
    helpText,
    disabled,
    inputStyle,
    rightSection,
    placeholder,
    defaultValue,
    type = "text",
    labelClassName,
    inputClassName,
    ...others
  } = props;
  const uid = index.useUid(id);
  let rightSectionComponent = null;
  const rightSectionRef = React__namespace.useRef();
  const handleChange = (event) => {
    onChange?.(event.currentTarget.value);
  };
  if (rightSection) {
    rightSectionComponent = React__namespace.cloneElement(rightSection, {
      className: index$1.classNames(rightSection?.props.className, "merge-left"),
      ref: rightSectionRef
    });
  }
  return /* @__PURE__ */ React__namespace.createElement("label", { htmlFor: uid, className: index$1.classNames({ error }, labelClassName) }, /* @__PURE__ */ React__namespace.createElement("p", null, label), /* @__PURE__ */ React__namespace.createElement("div", { className: index$1.classNames({ "merged-inputs": rightSection, "prefixed-input-container": prefix || suffix }) }, prefix && /* @__PURE__ */ React__namespace.createElement("span", { className: "input-prefix" }, prefix), /* @__PURE__ */ React__namespace.createElement(
    "input",
    {
      id: uid,
      ref,
      type,
      style: inputStyle,
      disabled,
      onChange: handleChange,
      placeholder,
      defaultValue,
      className: index$1.classNames({ "merge-right": rightSection, prefixed: prefix, suffixed: suffix }, inputClassName),
      ...others
    }
  ), suffix && /* @__PURE__ */ React__namespace.createElement(
    "span",
    {
      className: "input-suffix",
      style: {
        ...rightSection ? {
          paddingRight: rightSectionRef?.current && rightSectionRef.current?.getBoundingClientRect().width
        } : {}
      }
    },
    suffix
  ), rightSectionComponent), /* @__PURE__ */ React__namespace.createElement("small", null, error || helpText));
});
TextField.displayName = "TextField";

exports.TextField = TextField;
//# sourceMappingURL=TextField.js.map