github.com/freiheit-com/kuberpult@v1.24.2-0.20240328135542-315d5630abe6/services/frontend-service/src/ui/components/textfield/textfield.tsx (about)

     1  /*This file is part of kuberpult.
     2  
     3  Kuberpult is free software: you can redistribute it and/or modify
     4  it under the terms of the Expat(MIT) License as published by
     5  the Free Software Foundation.
     6  
     7  Kuberpult is distributed in the hope that it will be useful,
     8  but WITHOUT ANY WARRANTY; without even the implied warranty of
     9  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    10  MIT License for more details.
    11  
    12  You should have received a copy of the MIT License
    13  along with kuberpult. If not, see <https://directory.fsf.org/wiki/License:Expat>.
    14  
    15  Copyright 2023 freiheit.com*/
    16  import { ChangeEventHandler, useCallback, useState } from 'react';
    17  import classNames from 'classnames';
    18  
    19  export type TextfieldProps = {
    20      className?: string;
    21      placeholder?: string;
    22      value?: string | number;
    23      leadingIcon?: string;
    24      onChange?: ChangeEventHandler;
    25  };
    26  
    27  export const Textfield = (props: TextfieldProps): JSX.Element => {
    28      const { className, placeholder, leadingIcon, value, onChange } = props;
    29  
    30      const [hasFocus, setFocus] = useState(false);
    31  
    32      const onFocus = useCallback((): void => setFocus(true), [setFocus]);
    33      const onBlur = useCallback((): void => setFocus(false), [setFocus]);
    34  
    35      const allClassName = classNames(
    36          'mdc-text-field',
    37          'mdc-text-field--outlined',
    38          'mdc-text-field--no-label',
    39          {
    40              'mdc-text-field--with-leading-icon': leadingIcon,
    41              'mdc-text-field--focused': hasFocus,
    42          },
    43          className
    44      );
    45  
    46      return (
    47          <div className={allClassName}>
    48              <span className="mdc-notched-outline">
    49                  <span className="mdc-notched-outline__leading" />
    50                  <span className="mdc-notched-outline__trailing" />
    51              </span>
    52              {leadingIcon && (
    53                  <i className="material-icons mdc-text-field__icon mdc-text-field__icon--leading" tabIndex={0}>
    54                      {leadingIcon}
    55                  </i>
    56              )}
    57              <input
    58                  type="search"
    59                  className="mdc-text-field__input"
    60                  defaultValue={value}
    61                  placeholder={placeholder}
    62                  aria-label={placeholder}
    63                  onChange={onChange}
    64                  onFocus={onFocus}
    65                  onBlur={onBlur}
    66              />
    67          </div>
    68      );
    69  };