value.length = 0, valid: true, isValidated: false

value.length = 0, valid: true, isValidated: true

value.length > 0, valid: false, isValidated: false

value.length > 0, valid: true, isValidated: false

2

4

valid states:

impossible states:

v.length

valid

isValidated

2^3

2^3

	function transition(state, event) {
	switch(state) {
	case "Empty":
	case "Invalid":
	case "Valid":
	switch(event.type) {
	case "TYPE":
	return validateEmail(event.payload)
	? "Valid" : "Invalid"
	default:
	return state;
	}
	default:
	throw Error("Impossible state")
	}
	}

	<input
	type="text"
	onChange={e => {
	setInputContext(e.target.value);
	setInputState(
	transition(inputState, "TYPE")
	);
	}}
	/>;

	{
	inputState === "Invalid" &&
	<p>Enter a valid email address</p>;
	}

	type State =
	\| {
	formState:
	\| "Valid" \| "Submitting"
	\| "SubmitSucceeded" \| "SubmitFailed"
	InputStates: {
	email: "Valid"
	password: "Valid"
	};
	}
	\| {
	formState: "Invalid";
	inputStates: {
	email: "Empty" \| "Invalid" \| "Valid"
	password: "Empty" \| "Invalid" \| "Valid"
	};
	};

	<button
	type="submit"
	disabled={
	state.formState === "Submitting"
	}>
	Sign In
	</button>

	{
	formState.state === "SubmitFailed" &&
	<p>{ formContext.submitError }</p>;
	}

	onMouseDown = () => {
	sendEvent({ type: "GRAB", data: { shiftX, shiftY } });
	}

	onMouseMove = () => {
	sendEvent({
	type: "MOVE",
	data: { x: event.pageX, y: event.pageY }
	});
	}

	onMouseUp = () => {
	sendEvent("RELEASE");
	};

	{
	submitting: boolean;
	submitError: string \| undefined;
	isSuccess: boolean;
	}

	onChange(e) {
	setInputContext(e.target.value)
	setInputState(transition(inputState, "TYPE"))
	}

	{
	!valid && isValidated &&
	<p>Enter a valid email address</p>;
	}

	box.onmousedown = function(event) {
	// (1) prepare to moving: make absolute and on top by z-index
	box.style.position = 'absolute';
	box.style.zIndex = 1000;
	// move it out of any current parents directly into body
	// to make it positioned relative to the body
	document.body.append(box);
	// ...and put that absolutely positioned ball under the pointer

	moveAt(event.pageX, event.pageY);

	// centers the ball at (pageX, pageY) coordinates
	function moveAt(pageX, pageY) {
	box.style.left = pageX - box.shiftX + 'px';
	box.style.top = pageY - box.shiftY + 'px';
	}

	function onMouseMove(event) {
	moveAt(event.pageX, event.pageY);
	}

	// (2) move the ball on mousemove
	document.addEventListener('mousemove', onMouseMove);

	// (3) drop the ball, remove unneeded handlers
	box.onmouseup = function() {
	document.removeEventListener('mousemove', onMouseMove);
	box.onmouseup = null;
	};
	};