vcc-ui/_src/components/text-input/index.js

VCC UI is a collection of React UI Components that can be used for developing front-end applications at Volvo Car Corporation.

import React from 'react';
import { string, func, bool } from 'prop-types';
import { useFela } from 'react-fela';
import { Block } from '../block';
import { getThemeStyle } from '../../get-theme-style';
import { deprecate } from '../..//deprecate';

/* Pending for removal in 2.0.0 */
function warn(type) {
  deprecate(
    `TEXT_INPUT_TYPES is being removed in next major version.
    Please use the native HTML input string types instead.
    in this case: <input type="${type}">`,
    true
  );
  return type;
}
export const TEXT_INPUT_TYPES = {
  get TEXT() {
    return warn('text');
  },

  get TELEPHONE() {
    return warn('tel');
  },

  get EMAIL() {
    return warn('email');
  },

  get SEARCH() {
    return warn('search');
  },

  get PASSWORD() {
    return warn('password');
  },

  get NUMBER() {
    return warn('number');
  },
};

const defaultStyles = ({ theme, isValid }) => ({
  appearance: 'none',
  borderWidth: 1,
  borderStyle: 'solid',
  borderRadius: 0,
  boxSizing: 'border-box',
  display: 'block',
  width: '100%',
  margin: 0,
  outline: 0,
  padding: `${theme.tokens.inputPaddingVertical}px ${theme.tokens.inputPaddingHorizontal}px`,
  borderColor: theme.tokens.inputBorder,
  color: theme.tokens.inputForeground,
  background: theme.tokens.inputBackground,
  extend: [
    {
      condition: !isValid,
      style: {
        borderColor: theme.color.foreground.alert,
      },
    },
    {
      condition: isValid,
      style: {
        ':focus': {
          borderColor: theme.tokens.inputBorderFocus,
        },
      },
    },
  ],

  ':disabled': {
    cursor: 'not-allowed',
    color: theme.tokens.inputDisabledForeground,
    borderColor: theme.tokens.inputDisabledBorder,
  },
  '::placeholder': {
    color: theme.tokens.inputPlaceholder,
  },
});

export const TextInput = React.forwardRef(
  ({ onChange, type, value = '', isValid = true, ...props }, ref) => {
    const { theme } = useFela();

    const styleProps = {
      isValid,
      theme,
    };

    return (
      <Block
        ref={ref}
        {...props}
        value={value}
        type={type}
        as="input"
        onChange={onChange}
        extend={[
          defaultStyles(styleProps),
          getThemeStyle('textInput', theme, styleProps),
        ]}
      />
    );
  }
);

TextInput.displayName = 'TextInput';
TextInput.propTypes = {
  type: string,
  /** onChange handler. Triggers on every keyboard and generally
   * is here where you change the value of the `value` property  */
  onChange: func.isRequired,
  /** Value of the textInput. This should be stored in the
   * state of the parent component  */
  value: string.isRequired,
  /** Renders the input as valid or invalid */
  isValid: bool,
};