Conditional props

Proptypes.ts

/*
 * This forces you to have at least one of : isReadOnly, isDisabled, or onChange
 */

import React from "react";

interface ContainsReadonly {
  isReadOnly: boolean;
}

interface ContainsDisabled {
  isDisabled: boolean;
}

interface ContainingOnChange {
  /** Some really cool thing */
  onChange: () => void;
}

type OnChangeUnlessReadonlyOrDisabled =
  | ContainingOnChange
  | (ContainsReadonly | ContainsDisabled);

interface BaseProps {
  isDisabled?: boolean;
  isReadOnly?: boolean;
  /** This is required unless isDisabled or isReadOnly is passed in */
  onChange?: () => void;
  /** This is a size of things */
  size: string;
}

type IProps = BaseProps & OnChangeUnlessReadonlyOrDisabled;

const Input = (props: IProps) => {
  return <input onChange={props.onChange} />;
};

const First = <Input onChange={() => {}} size="small" />;
const Third = <Input size="small" isDisabled />;
const Second = <Input size="small" />;

export default Input;