glide-design-system/src/lib/components/textField/TextField.js

Glide design system is an open-source React component library. It offers numerous benefits that make them essential tools for design and development teams.

import React, { useEffect, useState } from "react";
import "./textfield.css";
import PropTypes from "prop-types";

// /**
//  * renders Textfield
//  * @param {*} type  default: "text": The type of the input field. It can be any valid HTML input type, such as "text", "password", "email", etc.
//  * @param {*} style An object containing custom styles to be applied to the container of the text field.
//  * @param {*} onChange A function to be called when the value of the input field changes. It receives the event object as an argument.
//  * @param {*} value The current value of the input field. It is used to control the input field from a parent component.
//  * @param {*} placeholder The placeholder text to display inside the input field when it is empty.
//  * @param {*} disabled A boolean flag to disable the input field if set to true.
//  * @param {*} size The size of the text field. It can be "small", "medium", or "large".
//  * @param {*} icon An icon element to be displayed before or after the input field
//  * @param {*} iconPosition The position of the icon relative to the input field. It can be set to "start" (before the input) or "end" (after the input).
//  * @param {*} name The name attribute of the input field. It is used to identify the input field when submitting a form.
//  * @param {*} width The width of the text field container.
//  */

/**
 * Text Fields let users enter and edit text.
 */

export const TextField = ({
  type = "text",

  style,
  onChange,
  value,
  placeholder,
  disabled,
  size,
  icon,
  iconPosition,
  name,
  width = "342px",
  required,
  className,
  textFieldStyle,
  containerClass,
  id,
  label,
  ...props
}) => {
  const [updateValue, setValue] = useState(value ? value : "");
  useEffect(() => {
    setValue(value);
  }, [value]);
  const combinedStyle = {
    width: width,
    height: size === "large" ? "40px" : size === "small" ? "32px" : "36px",
    flexDirection: iconPosition === "end" ? "row-reverse" : "",
    backgroundColor: disabled ? "#f9f9f9" : "#ffffff",
    ...style,
  };
  const valueHandler = (e) => {
    setValue(e.target.value);
    if (onChange) onChange(e);
  };
  return (
    <div style={{ width: width }}>
      {(label || required) && (
        <p style={{ margin: "0px !important" }} className={`headers`}>
          {label ? label : ""}
          {required && <span className={`required`}>*</span>}
        </p>
      )}

      <div
        className={`textfieldParentContainer ${
          containerClass ? containerClass : ""
        }`}
        style={combinedStyle}
      >
        {icon && <div className="textfieldIcon">{icon}</div>}
        <input
          data-testid={id}
          id={id}
          type={type}
          onChange={(e) => valueHandler(e)}
          value={updateValue === undefined ? "" : updateValue}
          placeholder={placeholder}
          disabled={disabled}
          name={name}
          className={`textfield ${className ? className : ""}`}
          {...props}
          style={{
            fontSize:
              size === "large" ? "18px" : size === "small" ? "14px" : "16px",
            cursor: disabled ? "not-allowed" : "",
            ...textFieldStyle,
          }}
        />
      </div>
    </div>
  );
};

TextField.propTypes = {
  /**
   * Variant of the textField.
   */
  // variant: PropTypes.string,
  /**
   * TextField disabled or not.
   */
  disabled: PropTypes.bool,
  /**
   * Icon to be display in textField.
   */
  icon: PropTypes.object,
  /**
   * Position of Icon.
   */
  iconPosition: PropTypes.oneOf(["start", "end"]),
  /**
   * How large should the textField be?
   */
  size: PropTypes.oneOf(["small", "medium", "large"]),
  /**
   * Optional change handler.
   */
  onChange: PropTypes.func,
  /**
   * Name of TextField.
   */
  name: PropTypes.string,
  /**
   * Width of the textField
   */
  width: PropTypes.string,
  required: PropTypes.bool,
};

TextField.defaultProps = {
  size: "medium",
};