vcc-ui/_src/components/text-area/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 { bool, string, func } from 'prop-types';
import { useFela } from 'react-fela';
import { Block } from '../block';
import { getThemeStyle } from '../../get-theme-style';

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,
        },
      },
    },
  ],

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

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

    const styleProps = {
      isValid,
      theme,
    };

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

TextArea.displayName = 'TextArea';
TextArea.propTypes = {
  onChange: func.isRequired,
  /** Value of the input. This should be stored in the
   * state of the parent component  */
  value: string.isRequired,
  /** Renders the input as valid or invalid */
  isValid: bool,
};