Creating combo input with label, naming and input for Text, Select and DateRange (#1553)

* Issues: OHIF-46, OHIF-47, OHIF-48

platform/ui/src/components/InputDateRange/InputDateRange.jsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { DateRange, InputLabelWrapper } from '@ohif/ui';
+
+const InputDateRange = ({
+  label,
+  isSortable,
+  sortDirection,
+  onLabelClick,
+  value,
+  onChange,
+}) => {
+  const { startDate, endDate } = value;
+  return (
+    <InputLabelWrapper
+      label={label}
+      isSortable={isSortable}
+      sortDirection={sortDirection}
+      onLabelClick={onLabelClick}
+    >
+      <div className="relative">
+        <DateRange
+          startDate={startDate}
+          endDate={endDate}
+          onChange={onChange}
+        />
+      </div>
+    </InputLabelWrapper>
+  );
+};
+
+InputDateRange.defaultProps = {
+  value: {},
+};
+
+InputDateRange.propTypes = {
+  label: PropTypes.string.isRequired,
+  isSortable: PropTypes.bool.isRequired,
+  sortDirection: PropTypes.oneOf(['ascending', 'descending', 'none'])
+    .isRequired,
+  onLabelClick: PropTypes.func.isRequired,
+  value: PropTypes.shape({
+    /** Start date moment object */
+    startDate: PropTypes.object, // moment date is an object
+    /** End date moment object */
+    endDate: PropTypes.object, // moment date is an object
+  }),
+  onChange: PropTypes.func.isRequired,
+};
+
+export default InputDateRange;

platform/ui/src/components/InputDateRange/InputDateRange.mdx

@@ -0,0 +1,43 @@
+---
+name: InputDateRange
+menu: Components
+route: components/InputDateRange
+---
+
+import { useState } from 'react';
+import { Playground, Props } from 'docz';
+import InputDateRange from './';
+
+# Input Date Range
+
+## Import
+
+```javascript
+import { InputDateRange } from '@ohif/ui';
+```
+
+## Basic usage
+
+<Playground>
+  {() => {
+    const [dates, setDates] = useState({
+      startDate: null,
+      endDate: null,
+    });
+    return (
+      <div className="p-4 flex flex-col items-center">
+        <div className="w-56">
+          <InputDateRange
+            label="Dates"
+            value={dates}
+            onChange={dates => setDates(dates)}
+          />
+        </div>
+      </div>
+    );
+  }}
+</Playground>
+
+## Properties
+
+<Props of={InputDateRange} />

platform/ui/src/components/InputDateRange/index.js

@@ -0,0 +1,2 @@
+import InputDateRange from './InputDateRange';
+export default InputDateRange;