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

Beans' product component library

import * as React from 'react';
import { classNames } from '../../utils/classNames/index.js';
import { useUid } from '../../utils/useUid/index.js';
import '@floating-ui/react';

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

export { TextField };
//# sourceMappingURL=TextField.js.map