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, oneOf } from "prop-types";
import { useFela } from "react-fela";

import { Block } from "../block";

import { getThemeStyle } from "../../get-theme-style";

export const TEXT_INPUT_TYPES = {
	TELEPHONE: "tel",
	TEXT: "text",
	EMAIL: "email",
	SEARCH: "search",
	PASSWORD: "password",
	NUMBER: "number"
};

const defaultStyles = ({ theme }) => ({
	appearance: "none",
	fontWeight: 400,
	borderWidth: 1,
	borderStyle: "solid",
	borderRadius: 0,
	boxSizing: "border-box",
	display: "block",
	width: "100%",
	fontSize: 16,
	margin: 0,
	outline: 0,
	padding: `${theme.tokens.inputPaddingVertical}px ${
		theme.tokens.inputPaddingHorizontal
	}px`,
	lineHeight: 1,
	borderColor: theme.tokens.inputBorder,
	color: theme.tokens.inputText,
	background: theme.tokens.inputBackground,
	":focus": {
		borderColor: theme.tokens.inputBorderFocus
	},
	"::placeholder": {
		color: theme.tokens.inputPlaceholder
	},
	"[disabled]": {
		cursor: "not-allowed",
		color: theme.tokens.inputDisabledForeground,
		borderColor: theme.tokens.inputDisabledBorder
	}
});

export function TextInput({
	onChange,
	type = TEXT_INPUT_TYPES.TEXT,
	value = "",
	...props
}) {
	const { theme } = useFela();

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

TextInput.propTypes = {
	/** TextInput type. Use `TEXT_INPUT_TYPES` to set this.*/
	type: oneOf([
		TEXT_INPUT_TYPES.TELEPHONE,
		TEXT_INPUT_TYPES.TEXT,
		TEXT_INPUT_TYPES.EMAIL,
		TEXT_INPUT_TYPES.SEARCH,
		TEXT_INPUT_TYPES.PASSWORD,
		TEXT_INPUT_TYPES.NUMBER
	]),
	/** 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
};