From f2a5fb5fefc9ab40a6ed003bea4d3a8704032893 Mon Sep 17 00:00:00 2001
From: sam-m-m <sam@dassana.io>
Date: Mon, 17 May 2021 15:38:38 -0700
Subject: [PATCH] feat #314 - Initial implementation

---
 .../DateRangeInput/DateRangeInput.stories.tsx | 15 ++++
 src/components/DateRangeInput/index.tsx       | 78 +++++++++++++++++++
 src/components/TimeInput/index.tsx            |  3 +-
 src/components/TimeInput/utils.ts             |  4 +-
 4 files changed, 96 insertions(+), 4 deletions(-)
 create mode 100644 src/components/DateRangeInput/DateRangeInput.stories.tsx
 create mode 100644 src/components/DateRangeInput/index.tsx

diff --git a/src/components/DateRangeInput/DateRangeInput.stories.tsx b/src/components/DateRangeInput/DateRangeInput.stories.tsx
new file mode 100644
index 00000000..be468439
--- /dev/null
+++ b/src/components/DateRangeInput/DateRangeInput.stories.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import { DateRangeInput, DateRangeInputProps } from '.'
+import { Meta, Story } from '@storybook/react/types-6-0'
+
+export default {
+	component: DateRangeInput,
+	title: 'DateRangeInput'
+} as Meta
+
+const Template: Story<DateRangeInputProps> = args => (
+	<DateRangeInput {...args} />
+)
+
+export const Default = Template.bind({})
+Default.args = {}
diff --git a/src/components/DateRangeInput/index.tsx b/src/components/DateRangeInput/index.tsx
new file mode 100644
index 00000000..73699550
--- /dev/null
+++ b/src/components/DateRangeInput/index.tsx
@@ -0,0 +1,78 @@
+import cn from 'classnames'
+import { DatePicker } from 'antd'
+import { MomentInputObject } from 'moment'
+import { formatTime, parseTime } from '../TimeInput/utils'
+import React, { FC } from 'react'
+
+const { RangePicker: AntDRangePicker } = DatePicker
+
+export interface DateRangeInputValue {
+	end: number
+	start: number
+}
+
+interface TimeProps {
+	displayFormat?: string
+}
+
+export interface DateRangeInputProps {
+	classes?: string[]
+	displayFormat?: string
+	onChange?: (value: DateRangeInputValue) => void
+	/**
+	 * Whether to include time or not. Can either be boolean or an object
+	 */
+	includeTime?: boolean | TimeProps
+	value?: DateRangeInputValue
+}
+
+export const DateRangeInput: FC<DateRangeInputProps> = ({
+	classes = [],
+	displayFormat = 'YYYY-MM-DD hh:mm A',
+	onChange,
+	includeTime = { displayFormat: 'hh:mm A' },
+	value
+}: DateRangeInputProps) => {
+	if (value && !onChange) {
+		throw new Error('Controlled inputs require an onChange prop')
+	}
+
+	let controlledCmpProps = {}
+
+	if (onChange) {
+		controlledCmpProps = {
+			onChange: (
+				momentObjArr: [MomentInputObject, MomentInputObject]
+			) => {
+				onChange({
+					end: parseTime(momentObjArr[1], 'unix'),
+					start: parseTime(momentObjArr[0], 'unix')
+				})
+			}
+		}
+
+		if (value) {
+			controlledCmpProps = {
+				...controlledCmpProps,
+				value: [
+					formatTime('unix', value.start),
+					formatTime('unix', value.end)
+				]
+			}
+		}
+	}
+
+	return (
+		<AntDRangePicker
+			allowClear={false}
+			className={cn(classes)}
+			format={displayFormat}
+			showTime={
+				typeof includeTime === 'boolean'
+					? includeTime
+					: { format: includeTime.displayFormat }
+			}
+			{...controlledCmpProps}
+		/>
+	)
+}
diff --git a/src/components/TimeInput/index.tsx b/src/components/TimeInput/index.tsx
index 65535233..4891cdca 100644
--- a/src/components/TimeInput/index.tsx
+++ b/src/components/TimeInput/index.tsx
@@ -27,7 +27,7 @@ export interface TimeInputProps
 	onChange?: (value: number) => void
 	onFocus?: (event: FocusEvent<HTMLInputElement>) => void
 	/**
-	 * format of time input value. Either a unix timestamp in seconds or hour integer (0 - 24)
+	 * format of time input value. Either a unix timestamp in milliseconds or hour integer (0 - 24)
 	 * @default 'unix'
 	 */
 	format?: TimeFormat
@@ -35,7 +35,6 @@ export interface TimeInputProps
 	 * Interval between minutes in dropdown
 	 * @default 1
 	 * */
-
 	minuteStep?: number
 	/**
 	 * Selector of HTML element inside which to render the dropdown
diff --git a/src/components/TimeInput/utils.ts b/src/components/TimeInput/utils.ts
index a5371531..1e0f39f6 100644
--- a/src/components/TimeInput/utils.ts
+++ b/src/components/TimeInput/utils.ts
@@ -29,7 +29,7 @@ export const formatTime: FormatTime = (format, value) => {
 	if (isUndefined(value)) return value
 
 	if (format === 'unix') {
-		return moment.unix(value)
+		return moment(value)
 	}
 
 	return moment(value, hourIntegerFormat)
@@ -46,7 +46,7 @@ export const parseTime: ParseTime = (
 	format: TimeFormat
 ) =>
 	format === 'unix'
-		? moment(momentObj).unix()
+		? moment(momentObj).valueOf()
 		: parseInt(moment(momentObj).format(hourIntegerFormat))
 
 // -x-x-x-x-x-x-x-x- Styles Related -x-x-x-x-x-x-x-x-