Example of a HOC

by Aaron Fryer

TypeScript

import * as React from 'react';
import { checkDateInput } from '../../utils/Supports';
import CustomDatePicker from './CustomDatePicker';
import NativeDatePicker from './NativeDatePicker';

/**
 * DatePicker Component used for selecting between the native <input type="date" /> and the custom date picker. This is used for automatically showing the correct picker
 * 
 * @param {string} defaultValue - optional parameter provides the default value of the date picker. Must be in the RFC 3339 format YYYY-MM-DD
 * @param {any} onChange - specifies the onChange function
 * @param {string} icon - optional parameter to specify what the icon will be. If no icon then no icon will be displayed
 * @param {string} max - optional parameter to specify what the maximum date that can be selected
 * @param {string} min - optional parameter to specify what the minimum date that can be selected
 * @param {string} icon - optional parameter to specify the type of component to use
 * @param {string} value - optional parameter to specify the value of component (makes component controlled)
 * @param {string} placement - optional parameter to specify if the picker should be placed either on the left / right (CustomDatePicker only)
 * 
 */

interface DatePicker {
  defaultValue?: string;
  label?: string;
  icon: string;
  max?: string;
  min?: string;
  onChange: any;
  placement?: string;
  type?: string;
  value?: string;
}

function DatePicker(props: DatePicker) {
  if(checkDateInput() && !props.type || props.type === "native" && checkDateInput()) {
    return <NativeDatePicker {...props} />
  } else if (props.type === "custom") {
    return <CustomDatePicker {...props} />
  }
  return <CustomDatePicker {...props} />
}

export default DatePicker