vcc-ui/_src/components/select-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 { withTheme } from "react-fela";
import { useFela } from "react-fela";
import { func, string, array, bool } from "prop-types";
import { Block } from "../block";
import { Spinner } from "../spinner";
import { getThemeStyle } from "../../get-theme-style";

const arrowColor = ({ theme, disabled }) =>
	disabled ? theme.tokens.inputDisabledControl : theme.tokens.inputControl;

const styles = ({ disabled, theme }) => ({
	appearance: "none",
	color: "#333",
	backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 13 6' fill='${encodeURIComponent(
		arrowColor({ theme, disabled })
	)}' %3E %3Cpath d='M6.49987275 4.13397441L11.78483479.5 12.5 1.37426775 6.49986464 5.5.5 1.3743604l.7151756-.87426061z'%3E %3C/path%3E %3C/svg%3E")`,
	backgroundSize: "15px 15px",
	backgroundColor: theme.tokens.inputBackground,
	backgroundPosition: "right 18px center",
	backgroundRepeat: "no-repeat",
	userSelect: "none",
	overflow: "hidden",
	margin: "0",
	padding: `${theme.tokens.inputPaddingVertical}px ${
		theme.tokens.inputPaddingHorizontal
	}px`,
	textOverflow: "ellipsis",
	whiteSpace: "nowrap",
	width: "100%",
	boxSizing: "border-box",
	borderRadius: 0,
	borderWidth: "1px",
	borderStyle: "solid",
	borderColor: theme.tokens.inputBorder,
	display: "block",
	fontSize: 16,
	fontWeight: 400,
	"[disabled]": {
		color: theme.tokens.inputDisabledForeground
	},
	"& option[disabled]": {
		color: theme.tokens.inputDisabledForeground
	},
	":invalid": {
		color: theme.tokens.inputPlaceholder
	},
	":focus:invalid": {
		color: theme.tokens.inputPlaceholder
	},
	"::-ms-expand": {
		display: "none"
	},
	"::-ms-value": {
		background: "none",
		color: "#333"
	},
	":valid": {
		color: "#333"
	},
	"& option": {
		color: "#333"
	},
	":-moz-focusring": {
		color: "transparent",
		textShadow: "0 0 0 #000"
	},
	outline: 0,
	cursor: disabled ? "not-allowed" : "pointer",
	":focus": {
		borderColor: theme.tokens.inputBorderFocus
	}
});

const isLoadingStyles = () => ({
	background: "none",
	display: "flex",
	justifyContent: "center",
	width: "100%",
	padding: "15px 18px 14px 18px"
});

const SelectInputComponent = ({
	as = "select",
	value,
	placeholder,
	disabled,
	options,
	loading = false,
	...props
}) => {
	const { theme } = useFela();
	if (loading) {
		return (
			<Block
				extend={[
					styles,
					isLoadingStyles,
					getThemeStyle("selectInput", theme, {
						disabled
					})
				]}
			>
				<Spinner size={24} />
			</Block>
		);
	}
	return (
		<Block
			as={as}
			extend={[
				styles,
				getThemeStyle("selectInput", theme, {
					disabled
				})
			]}
			value={value || (placeholder && "")}
			required={true}
			disabled={disabled}
			{...props}
		>
			{placeholder && (
				<Block as="option" value={""} disabled hidden>
					{placeholder}
				</Block>
			)}
			{options.map(option => (
				<option
					key={option.value}
					value={option.value}
					disabled={option.disabled}
				>
					{option.label}
				</option>
			))}
		</Block>
	);
};

const propTypes = {
	onChange: func.isRequired,
	options: array.isRequired,
	placeholder: string,
	value: string,
	disabled: bool,
	loading: bool
};

SelectInputComponent.propTypes = propTypes;
SelectInputComponent.displayName = "SelectInput";

const SelectInput = withTheme(SelectInputComponent);

export { SelectInput };