Add support for inputRef prop

Closes #384

README.md

@@ -102,6 +102,7 @@ Displays a complete, interactive calendar.
 |formatMonthYear|Function called to override default formatting of months and years. Can be used to use your own formatting function.|(default formatter)|`(locale, date) => formatDate(date, 'MMMM YYYY')`|
 |formatShortWeekday|Function called to override default formatting of weekday names. Can be used to use your own formatting function.|(default formatter)|`(locale, date) => formatDate(date, 'dd')`|
 |formatYear|Function called to override default formatting of year in the top navigation section. Can be used to use your own formatting function.|(default formatter)|`(locale, date) => formatDate(date, 'YYYY')`|
+|inputRef|A prop that behaves like [ref](https://reactjs.org/docs/refs-and-the-dom.html), but it's passed to main `<div>` rendered by `<Calendar>` component.|n/a|<ul><li>Function:<br />`(ref) => { this.myCalendar = ref; }`</li><li>Ref created using `React.createRef`:<br />`this.ref = React.createRef();`<br />…<br />`inputRef={this.ref}`</li><li>Ref created using `React.useRef`:<br />`const ref = React.useRef();`<br />…<br />`inputRef={ref}`</li></ul>|
 |locale|Locale that should be used by the calendar. Can be any [IETF language tag](https://en.wikipedia.org/wiki/IETF_language_tag).|User's browser settings|`"hu-HU"`|
 |maxDate|Maximum date that the user can select. Periods partially overlapped by maxDate will also be selectable, although React-Calendar will ensure that no later date is selected.|n/a|Date: `new Date()`|
 |maxDetail|The most detailed view that the user shall see. View defined here also becomes the one on which clicking an item will select a date and pass it to onChange. Can be `"month"`, `"year"`, `"decade"` or `"century"`.|`"month"`|`"year"`|

src/Calendar.jsx

@@ -12,7 +12,7 @@ import {
   getBegin, getBeginNext, getEnd, getValueRange,
 } from './shared/dates';
 import {
-  isCalendarType, isClassName, isMaxDate, isMinDate, isValue, isView,
+  isCalendarType, isClassName, isMaxDate, isMinDate, isRef, isValue, isView,
 } from './shared/propTypes';
 import { between } from './shared/utils';
 
@@ -594,7 +594,12 @@ export default class Calendar extends Component {
   }
 
   render() {
-    const { className, selectRange, showDoubleView } = this.props;
+    const {
+      className,
+      inputRef,
+      selectRange,
+      showDoubleView,
+    } = this.props;
     const { onMouseLeave, value } = this;
     const valueArray = [].concat(value);
 
@@ -606,6 +611,7 @@ export default class Calendar extends Component {
           showDoubleView && `${baseClassName}--doubleView`,
           className,
         )}
+        ref={inputRef}
       >
         {this.renderNavigation()}
         <div
@@ -648,6 +654,7 @@ Calendar.propTypes = {
   formatMonthYear: PropTypes.func,
   formatShortWeekday: PropTypes.func,
   formatYear: PropTypes.func,
+  inputRef: isRef,
   locale: PropTypes.string,
   maxDate: isMaxDate,
   maxDetail: PropTypes.oneOf(allViews),

src/Calendar.spec.jsx

@@ -23,6 +23,17 @@ describe('Calendar', () => {
     expect(wrapperClassName.includes(className)).toBe(true);
   });
 
+  it('passes container element to inputRef properly', () => {
+    const inputRef = jest.fn();
+
+    mount(
+      <Calendar inputRef={inputRef} />,
+    );
+
+    expect(inputRef).toHaveBeenCalled();
+    expect(inputRef.mock.calls[0][0]).toBeInstanceOf(HTMLElement);
+  });
+
   it('renders Navigation by default', () => {
     const component = shallow(
       <Calendar />,

src/shared/propTypes.js

@@ -52,6 +52,13 @@ export const isMaxDate = (props, propName, componentName) => {
   return null;
 };
 
+export const isRef = PropTypes.oneOfType([
+  PropTypes.func,
+  PropTypes.shape({
+    current: PropTypes.any,
+  }),
+]);
+
 export const isValue = PropTypes.oneOfType([
   PropTypes.instanceOf(Date),
   PropTypes.arrayOf(PropTypes.instanceOf(Date)),