refactor(Portal): allow to use createRef() API in triggerRef

CHANGELOG.md

@@ -19,6 +19,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ### Fixes
 - Fix layout of `Accordion` panel's title @kuzhelov ([#780](https://github.com/stardust-ui/react/pull/780))
+- Allow to use `createRef()` API with `triggerRef` prop in `Portal` component @layershifter ([#787](https://github.com/stardust-ui/react/pull/787))
 
 <!--------------------------------[ v0.19.0 ]------------------------------- -->
 ## [v0.19.0](https://github.com/stardust-ui/react/tree/v0.19.0) (2019-01-28)

src/components/Dropdown/DropdownSearchInput.tsx

@@ -2,7 +2,13 @@ import * as React from 'react'
 import * as PropTypes from 'prop-types'
 import * as _ from 'lodash'
 
-import { UIComponent, RenderResultConfig, createShorthandFactory, commonPropTypes } from '../../lib'
+import {
+  UIComponent,
+  RenderResultConfig,
+  createShorthandFactory,
+  commonPropTypes,
+  customPropTypes,
+} from '../../lib'
 import { ComponentEventHandler, ReactProps } from '../../../types/utils'
 import { UIComponentProps } from '../../lib/commonPropInterfaces'
 import Input from '../Input/Input'
@@ -68,7 +74,7 @@ class DropdownSearchInput extends UIComponent<ReactProps<DropdownSearchInputProp
     accessibilityInputProps: PropTypes.object,
     accessibilityComboboxProps: PropTypes.object,
     hasToggleButton: PropTypes.bool,
-    inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    inputRef: customPropTypes.ref,
     onFocus: PropTypes.func,
     onInputBlur: PropTypes.func,
     onInputKeyDown: PropTypes.func,

src/components/Input/Input.tsx

@@ -90,7 +90,7 @@ class Input extends AutoControlledComponent<ReactProps<InputProps>, InputState>
     icon: customPropTypes.itemShorthand,
     iconPosition: PropTypes.oneOf(['start', 'end']),
     input: customPropTypes.itemShorthand,
-    inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    inputRef: customPropTypes.ref,
     inline: PropTypes.bool,
     onChange: PropTypes.func,
     type: PropTypes.string,

src/components/Portal/Portal.tsx

@@ -10,7 +10,9 @@ import {
   ChildrenComponentProps,
   commonPropTypes,
   ContentComponentProps,
+  handleRef,
   rtlTextContainer,
+  customPropTypes,
 } from '../../lib'
 import Ref from '../Ref/Ref'
 import PortalInner from './PortalInner'
@@ -54,12 +56,8 @@ export interface PortalProps extends ChildrenComponentProps, ContentComponentPro
   /** Accessibility behavior object to apply on trigger node. */
   triggerAccessibility?: TriggerAccessibility
 
-  /**
-   * Called with a ref to the trigger node.
-   *
-   * @param {JSX.Element} node - Referred node.
-   */
-  triggerRef?: (node: HTMLElement) => void
+  /** Sets trigger node to passed ref. */
+  triggerRef?: React.Ref<any>
 
   /**
    * Called when trigger node was clicked.
@@ -103,7 +101,7 @@ class Portal extends AutoControlledComponent<ReactPropsStrict<PortalProps>, Port
     onUnmount: PropTypes.func,
     open: PropTypes.bool,
     trigger: PropTypes.node,
-    triggerRef: PropTypes.func,
+    triggerRef: customPropTypes.ref,
     triggerAccessibility: PropTypes.object,
     onTriggerClick: PropTypes.func,
     onOutsideClick: PropTypes.func,
@@ -180,8 +178,7 @@ class Portal extends AutoControlledComponent<ReactPropsStrict<PortalProps>, Port
 
   private handleTriggerRef = (triggerNode: HTMLElement) => {
     this.triggerNode = triggerNode
-
-    _.invoke(this.props, 'triggerRef', triggerNode)
+    handleRef(this.props.triggerRef, triggerNode)
   }
 
   private handleTriggerClick = (e: ReactMouseEvent, ...unhandledProps) => {

src/components/Ref/Ref.tsx

@@ -2,7 +2,7 @@ import * as PropTypes from 'prop-types'
 import * as React from 'react'
 import { isForwardRef } from 'react-is'
 
-import { ChildrenComponentProps } from '../../lib'
+import { ChildrenComponentProps, customPropTypes } from '../../lib'
 import { ReactPropsStrict } from '../../../types/utils'
 import RefFindNode from './RefFindNode'
 import RefForward from './RefForward'
@@ -27,7 +27,7 @@ const Ref: React.SFC<ReactPropsStrict<RefProps>> = props => {
 
 Ref.propTypes = {
   children: PropTypes.element.isRequired,
-  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]) as PropTypes.Requireable<any>,
+  innerRef: customPropTypes.ref as PropTypes.Requireable<any>,
 }
 
 export default Ref

src/components/Ref/RefFindNode.tsx

@@ -2,7 +2,7 @@ import * as PropTypes from 'prop-types'
 import * as React from 'react'
 import * as ReactDOM from 'react-dom'
 
-import { ChildrenComponentProps, handleRef } from '../../lib'
+import { ChildrenComponentProps, customPropTypes, handleRef } from '../../lib'
 
 export interface RefFindNodeProps extends ChildrenComponentProps<React.ReactElement<any>> {
   /**
@@ -16,7 +16,7 @@ export interface RefFindNodeProps extends ChildrenComponentProps<React.ReactElem
 export default class RefFindNode extends React.Component<RefFindNodeProps> {
   static propTypes = {
     children: PropTypes.element.isRequired,
-    innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    innerRef: customPropTypes.ref,
   }
 
   componentDidMount() {

src/components/Ref/RefForward.tsx

@@ -1,7 +1,7 @@
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
 
-import { ChildrenComponentProps, handleRef } from '../../lib'
+import { ChildrenComponentProps, customPropTypes, handleRef } from '../../lib'
 
 export interface RefForwardProps
   extends ChildrenComponentProps<React.ReactElement<any> & { ref: React.Ref<any> }> {
@@ -16,7 +16,7 @@ export interface RefForwardProps
 export default class RefForward extends React.Component<RefForwardProps> {
   static propTypes = {
     children: PropTypes.element.isRequired,
-    innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    innerRef: customPropTypes.ref,
   }
 
   private handleRefOverride = (node: HTMLElement) => {

src/lib/customPropTypes.tsx

@@ -464,3 +464,6 @@ export const animation = PropTypes.oneOfType([
   }) as any,
   PropTypes.string,
 ])
+
+/** A checker that matches the React.Ref type. */
+export const ref = PropTypes.oneOfType([PropTypes.func, PropTypes.object])