vcc-ui/_src/components/toggle/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, func } from "prop-types";
import { useFela } from "react-fela";
import { Inline } from "../inline";

const rootStyle = {
	width: 40,
	height: 25,
	position: "relative",
	display: "inline-block",
	verticalAlign: "middle",
	flexGrow: 0,
	flexShrink: 0
};

const inputStyle = ({ theme }) => ({
	appearance: "none",
	border: "none",
	":focus + span": {
		borderColor: theme.tokens.inputBorderFocus
	}
});

const backgroundStyle = ({ checked, theme, disabled }) => ({
	position: "absolute",
	borderWidth: 1,
	borderStyle: "solid",
	borderRadius: 45,
	top: 0,
	left: 0,
	right: 0,
	bottom: 0,
	outline: 0,
	padding: 0,
	borderColor: theme.tokens.inputBorder,
	background: theme.tokens.inputBackground,
	cursor: disabled ? "not-allowed" : "pointer",
	":focus": {
		borderColor: theme.tokens.inputBorderFocus
	},
	"::after": {
		content: "''",
		position: "absolute",
		bottom: 3,
		left: 3,
		width: 17,
		height: 17,
		background: disabled
			? theme.tokens.inputDisabledControl
			: theme.tokens.inputControl,
		borderRadius: "50%",
		transition: "transform 300ms cubic-bezier(0.230, 1.000, 0.320, 1.000)",
		transform: checked ? "translateX(15px)" : "translateX(0px)"
	}
});

export function Toggle({ checked, disabled, onChange, ...props }) {
	const { theme } = useFela();

	return (
		<Inline as="label" extend={rootStyle}>
			<Inline
				as="input"
				type="checkbox"
				extend={inputStyle({ theme })}
				checked={checked}
				onChange={onChange}
				disabled={disabled}
				{...props}
			/>
			<Inline
				aria-label="toggle"
				extend={backgroundStyle({ checked, theme, disabled })}
			/>
		</Inline>
	);
}

Toggle.propTypes = {
	onChange: func.isRequired,
	checked: bool
};