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

Beans' product component library

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 * as React from 'react';
import { classNames, useUid } from '@/utils';
export const TextField = React.forwardRef((props, ref) => {
    var _a;
    const { id, label, error, prefix, suffix, onChange, helpText, disabled, inputStyle, rightSection, placeholder, defaultValue, type = 'text', labelClassName, inputClassName } = props, others = __rest(props, ["id", "label", "error", "prefix", "suffix", "onChange", "helpText", "disabled", "inputStyle", "rightSection", "placeholder", "defaultValue", "type", "labelClassName", "inputClassName"]);
    const uid = useUid(id);
    let rightSectionComponent = null;
    const rightSectionRef = React.useRef();
    const handleChange = (event) => {
        onChange === null || onChange === void 0 ? void 0 : onChange(event.currentTarget.value);
    };
    if (rightSection) {
        rightSectionComponent = React.cloneElement(rightSection, {
            className: classNames(rightSection === null || rightSection === void 0 ? void 0 : rightSection.props.className, 'merge-left'),
            ref: rightSectionRef,
        });
    }
    return (React.createElement("label", { htmlFor: uid, className: classNames({ error }, labelClassName) },
        React.createElement("p", null, label),
        React.createElement("div", { className: classNames({ 'merged-inputs': rightSection, 'prefixed-input-container': prefix || suffix }) },
            prefix && React.createElement("span", { className: "input-prefix" }, prefix),
            React.createElement("input", Object.assign({ id: uid, ref: ref, type: type, style: inputStyle, disabled: disabled, onChange: handleChange, placeholder: placeholder, defaultValue: defaultValue, className: classNames({ 'merge-right': rightSection, prefixed: prefix, suffixed: suffix }, inputClassName) }, others)),
            suffix && (React.createElement("span", { className: "input-suffix", style: Object.assign({}, (rightSection
                    ? {
                        paddingRight: (rightSectionRef === null || rightSectionRef === void 0 ? void 0 : rightSectionRef.current) &&
                            ((_a = rightSectionRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width),
                    }
                    : {})) }, suffix)),
            rightSectionComponent),
        React.createElement("small", null, error || helpText)));
});
TextField.displayName = 'TextField';