diff --git a/docs/src/examples/addons/Ref/Types/RefExampleRef.js b/docs/src/examples/addons/Ref/Types/RefExampleRef.js deleted file mode 100644 index fe5a52ce0a..0000000000 --- a/docs/src/examples/addons/Ref/Types/RefExampleRef.js +++ /dev/null @@ -1,72 +0,0 @@ -import React, { Component, createRef } from 'react' -import { Grid, Table, Ref, Segment } from 'semantic-ui-react' - -export default class RefExampleRef extends Component { - state = {} - - createdRef = createRef() - functionalRef = null - - handleRef = (node) => { - this.functionalRef = node - } - - componentDidMount() { - // eslint-disable-next-line react/no-did-mount-set-state - this.setState({ isMounted: true }) - } - - render() { - const { isMounted } = this.state - - return ( - - - - - An example node with functional ref - - - - An example node with ref from createRef() - - - - - - {isMounted && ( - - - - Type - - nodeName - - - textContent - - - - - - - Functional ref - {this.functionalRef.nodeName} - {this.functionalRef.textContent} - - - - - From createRef() - - {this.createdRef.current.nodeName} - {this.createdRef.current.textContent} - - -
- )} - - - ) - } -} diff --git a/docs/src/examples/addons/Ref/Types/RefForwardingExample.js b/docs/src/examples/addons/Ref/Types/RefForwardingExample.js deleted file mode 100644 index d551d21dd6..0000000000 --- a/docs/src/examples/addons/Ref/Types/RefForwardingExample.js +++ /dev/null @@ -1,58 +0,0 @@ -import React, { Component } from 'react' -import { Grid, Ref, Segment } from 'semantic-ui-react' - -const ExampleButton = React.forwardRef((props, ref) => ( -
-
-)) - -// eslint-disable-next-line react/no-multi-comp -export default class RefForwardingExample extends Component { - forwardedRef = React.createRef() - state = { isMounted: false } - - componentDidMount() { - // eslint-disable-next-line react/no-did-mount-set-state - this.setState({ isMounted: true }) - } - - render() { - const { isMounted } = this.state - const buttonNode = this.forwardedRef.current - - return ( - - - -

- A button below uses forwardRef API. -

- - - A button - - - - - - {isMounted && ( - - 
-                {JSON.stringify(
-                  {
-                    nodeName: buttonNode.nodeName,
-                    nodeType: buttonNode.nodeType,
-                    textContent: buttonNode.textContent,
-                  },
-                  null,
-                  2,
-                )}
-
- - )} - - - ) - } -} diff --git a/docs/src/examples/addons/Ref/Types/index.js b/docs/src/examples/addons/Ref/Types/index.js deleted file mode 100644 index 59b8705870..0000000000 --- a/docs/src/examples/addons/Ref/Types/index.js +++ /dev/null @@ -1,30 +0,0 @@ -import React from 'react' - -import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample' -import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection' - -const RefTypesExamples = () => ( - - - A component exposes the innerRef prop that always returns - the DOM node of both functional and class component children. - - } - examplePath='addons/Ref/Types/RefExampleRef' - /> - - Works with forwardRef API. - - } - examplePath='addons/Ref/Types/RefForwardingExample' - /> - -) - -export default RefTypesExamples diff --git a/docs/src/examples/addons/Ref/index.js b/docs/src/examples/addons/Ref/index.js deleted file mode 100644 index 7f4e5596e8..0000000000 --- a/docs/src/examples/addons/Ref/index.js +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react' -import Types from './Types' - -const RefExamples = () => ( -
- -
-) - -export default RefExamples diff --git a/index.d.ts b/index.d.ts index d7b28f7b8e..fb413f6366 100644 --- a/index.d.ts +++ b/index.d.ts @@ -1,3 +1,7 @@ +// Third party + +export { Ref, RefProps } from '@stardust-ui/react-component-ref' + // Addons export { @@ -27,17 +31,6 @@ export { StrictPortalInnerProps, } from './dist/commonjs/addons/Portal/PortalInner' export { default as Radio, RadioProps, StrictRadioProps } from './dist/commonjs/addons/Radio' -export { default as Ref, RefProps, StrictRefProps } from './dist/commonjs/addons/Ref' -export { - default as RefFindNode, - RefFindNodeProps, - StrictRefFindNodeProps, -} from './dist/commonjs/addons/Ref/RefFindNode' -export { - default as RefForward, - RefForwardProps, - StrictRefForwardProps, -} from './dist/commonjs/addons/Ref/RefForward' export { default as Responsive, ResponsiveProps, diff --git a/package.json b/package.json index 0b21afb3b7..ebe602bc7a 100644 --- a/package.json +++ b/package.json @@ -79,12 +79,13 @@ "dependencies": { "@babel/runtime": "^7.1.2", "@semantic-ui-react/event-stack": "^3.1.0", + "@stardust-ui/react-component-ref": "~0.38.0", "classnames": "^2.2.6", "keyboard-key": "^1.0.4", "lodash": "^4.17.15", "prop-types": "^15.7.2", "react-is": "^16.8.6", - "react-popper": "^1.3.3", + "react-popper": "^1.3.4", "shallowequal": "^1.1.0" }, "devDependencies": { @@ -102,7 +103,7 @@ "@babel/standalone": "^7.4.5", "@mdx-js/loader": "^0.20.3", "@stardust-ui/docs-components": "^0.34.1", - "@types/react": "^16.4.14", + "@types/react": "^16.8.25", "anchor-js": "^4.2.0", "babel-eslint": "^10.0.2", "babel-loader": "^8.0.6", diff --git a/src/addons/MountNode/lib/getNodeRefFromProps.js b/src/addons/MountNode/lib/getNodeRefFromProps.js index 149e3408bf..4c7644bece 100644 --- a/src/addons/MountNode/lib/getNodeRefFromProps.js +++ b/src/addons/MountNode/lib/getNodeRefFromProps.js @@ -1,7 +1,7 @@ +import { isRefObject, toRefObject } from '@stardust-ui/react-component-ref' import _ from 'lodash' -import { isBrowser, isRefObject } from '../../../lib' -const toRef = _.memoize((node) => ({ current: node })) +import { isBrowser } from '../../../lib' /** * Given `this.props`, return a `node` value or undefined. @@ -14,7 +14,7 @@ const getNodeRefFromProps = (props) => { if (isBrowser()) { if (isRefObject(node)) return node - return _.isNil(node) ? toRef(document.body) : toRef(node) + return _.isNil(node) ? toRefObject(document.body) : toRefObject(node) } } diff --git a/src/addons/Portal/Portal.js b/src/addons/Portal/Portal.js index 99644d1b84..5ec812c26e 100644 --- a/src/addons/Portal/Portal.js +++ b/src/addons/Portal/Portal.js @@ -1,4 +1,5 @@ import EventStack from '@semantic-ui-react/event-stack' +import { handleRef, Ref } from '@stardust-ui/react-component-ref' import keyboardKey from 'keyboard-key' import _ from 'lodash' import PropTypes from 'prop-types' @@ -8,10 +9,8 @@ import { AutoControlledComponent as Component, customPropTypes, doesNodeContainClick, - handleRef, makeDebugger, } from '../../lib' -import Ref from '../Ref' import PortalInner from './PortalInner' const debug = makeDebugger('portal') diff --git a/src/addons/Portal/PortalInner.js b/src/addons/Portal/PortalInner.js index 99e29e3345..de83fd53f7 100644 --- a/src/addons/Portal/PortalInner.js +++ b/src/addons/Portal/PortalInner.js @@ -1,10 +1,10 @@ +import { handleRef, Ref } from '@stardust-ui/react-component-ref' import _ from 'lodash' import PropTypes from 'prop-types' import React, { Component } from 'react' import { createPortal } from 'react-dom' -import { customPropTypes, handleRef, isBrowser, makeDebugger } from '../../lib' -import Ref from '../Ref' +import { customPropTypes, isBrowser, makeDebugger } from '../../lib' const debug = makeDebugger('portalInner') diff --git a/src/addons/Ref/Ref.d.ts b/src/addons/Ref/Ref.d.ts deleted file mode 100644 index 86e3f97e55..0000000000 --- a/src/addons/Ref/Ref.d.ts +++ /dev/null @@ -1,27 +0,0 @@ -import * as React from 'react' - -import RefFindNode from './RefFindNode' -import RefForward from './RefForward' - -export interface RefProps extends StrictRefProps { - [key: string]: any -} - -export interface StrictRefProps { - /** Primary content. */ - children?: React.ReactNode - - /** - * Called when componentDidMount. - * - * @param {HTMLElement} node - Referred node. - */ - innerRef?: React.Ref -} - -declare class Ref extends React.Component { - static FindNode: typeof RefFindNode - static Forward: typeof RefForward -} - -export default Ref diff --git a/src/addons/Ref/Ref.js b/src/addons/Ref/Ref.js deleted file mode 100644 index 5fc7c9d4c7..0000000000 --- a/src/addons/Ref/Ref.js +++ /dev/null @@ -1,36 +0,0 @@ -import PropTypes from 'prop-types' -import React from 'react' -import { isForwardRef } from 'react-is' - -import RefFindNode from './RefFindNode' -import RefForward from './RefForward' - -/** - * This component exposes a prop that supports functional and createRef() API and returns the DOM - * node of both functional and class component children. - */ -function Ref(props) { - const { children, innerRef } = props - - const child = React.Children.only(children) - const ElementType = isForwardRef(child) ? RefForward : RefFindNode - - return {child} -} - -Ref.propTypes = { - /** Primary content. */ - children: PropTypes.element.isRequired, - - /** - * Called when a child component will be mounted or updated. - * - * @param {HTMLElement} node - Referred node. - */ - innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), -} - -Ref.FindNode = RefFindNode -Ref.Forward = RefForward - -export default Ref diff --git a/src/addons/Ref/RefFindNode.d.ts b/src/addons/Ref/RefFindNode.d.ts deleted file mode 100644 index 843319fbd5..0000000000 --- a/src/addons/Ref/RefFindNode.d.ts +++ /dev/null @@ -1,21 +0,0 @@ -import * as React from 'react' - -export interface RefFindNodeProps extends StrictRefFindNodeProps { - [key: string]: any -} - -export interface StrictRefFindNodeProps { - /** Primary content. */ - children?: React.ReactElement - - /** - * Called when a child component will be mounted or updated. - * - * @param {HTMLElement} node - Referred node. - */ - innerRef?: React.Ref -} - -declare class RefFindNode extends React.Component {} - -export default RefFindNode diff --git a/src/addons/Ref/RefFindNode.js b/src/addons/Ref/RefFindNode.js deleted file mode 100644 index 98bcfe3c4b..0000000000 --- a/src/addons/Ref/RefFindNode.js +++ /dev/null @@ -1,48 +0,0 @@ -import PropTypes from 'prop-types' -import { Component } from 'react' -import { findDOMNode } from 'react-dom' - -import { handleRef } from '../../lib/refUtils' - -export default class RefFindNode extends Component { - static propTypes = { - /** Primary content. */ - children: PropTypes.element.isRequired, - - /** - * Called when a child component will be mounted or updated. - * - * @param {HTMLElement} node - Referred node. - */ - innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), - } - - prevNode = null - - componentDidMount() { - // eslint-disable-next-line react/no-find-dom-node - this.prevNode = findDOMNode(this) - - handleRef(this.props.innerRef, this.prevNode) - } - - componentDidUpdate() { - // eslint-disable-next-line react/no-find-dom-node - const currentNode = findDOMNode(this) - - if (this.prevNode !== currentNode) { - this.prevNode = currentNode - handleRef(this.props.innerRef, currentNode) - } - } - - componentWillUnmount() { - handleRef(this.props.innerRef, null) - } - - render() { - const { children } = this.props - - return children - } -} diff --git a/src/addons/Ref/RefForward.d.ts b/src/addons/Ref/RefForward.d.ts deleted file mode 100644 index 92f4ac6c46..0000000000 --- a/src/addons/Ref/RefForward.d.ts +++ /dev/null @@ -1,21 +0,0 @@ -import * as React from 'react' - -export interface RefForwardProps extends StrictRefForwardProps { - [key: string]: any -} - -export interface StrictRefForwardProps { - /** Primary content. */ - children?: React.ReactElement - - /** - * Called when a child component will be mounted or updated. - * - * @param {HTMLElement} node - Referred node. - */ - innerRef?: React.Ref -} - -declare class RefForward extends React.Component {} - -export default RefForward diff --git a/src/addons/Ref/RefForward.js b/src/addons/Ref/RefForward.js deleted file mode 100644 index 1c914fb598..0000000000 --- a/src/addons/Ref/RefForward.js +++ /dev/null @@ -1,33 +0,0 @@ -import PropTypes from 'prop-types' -import { cloneElement, Component } from 'react' - -import { handleRef } from '../../lib/refUtils' - -export default class RefForward extends Component { - static propTypes = { - /** Primary content. */ - children: PropTypes.element.isRequired, - - /** - * Called when a child component will be mounted or updated. - * - * @param {HTMLElement} node - Referred node. - */ - innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), - } - - handleRefOverride = (node) => { - const { children, innerRef } = this.props - - handleRef(children.ref, node) - handleRef(innerRef, node) - } - - render() { - const { children } = this.props - - return cloneElement(children, { - ref: this.handleRefOverride, - }) - } -} diff --git a/src/addons/Ref/index.d.ts b/src/addons/Ref/index.d.ts deleted file mode 100644 index e6e229d594..0000000000 --- a/src/addons/Ref/index.d.ts +++ /dev/null @@ -1 +0,0 @@ -export { default, RefProps, StrictRefProps } from './Ref' diff --git a/src/addons/Ref/index.js b/src/addons/Ref/index.js deleted file mode 100644 index 1aa10ed77d..0000000000 --- a/src/addons/Ref/index.js +++ /dev/null @@ -1 +0,0 @@ -export default from './Ref' diff --git a/src/addons/TextArea/TextArea.js b/src/addons/TextArea/TextArea.js index 734448c8b1..6f1794960a 100644 --- a/src/addons/TextArea/TextArea.js +++ b/src/addons/TextArea/TextArea.js @@ -1,8 +1,8 @@ +import { Ref } from '@stardust-ui/react-component-ref' import _ from 'lodash' import PropTypes from 'prop-types' import React, { Component, createRef } from 'react' -import Ref from '../Ref' import { getElementType, getUnhandledProps } from '../../lib' /** diff --git a/src/behaviors/Visibility/Visibility.js b/src/behaviors/Visibility/Visibility.js index ef07675826..630193b22b 100644 --- a/src/behaviors/Visibility/Visibility.js +++ b/src/behaviors/Visibility/Visibility.js @@ -1,8 +1,8 @@ +import { Ref } from '@stardust-ui/react-component-ref' import _ from 'lodash' import PropTypes from 'prop-types' import React, { Component, createRef } from 'react' -import Ref from '../../addons/Ref' import { eventStack, getElementType, diff --git a/src/elements/Button/Button.js b/src/elements/Button/Button.js index d68373075d..7857b0d840 100644 --- a/src/elements/Button/Button.js +++ b/src/elements/Button/Button.js @@ -1,9 +1,9 @@ +import { Ref } from '@stardust-ui/react-component-ref' import cx from 'classnames' import _ from 'lodash' import PropTypes from 'prop-types' import React, { Component, createRef } from 'react' -import Ref from '../../addons/Ref' import { childrenUtils, customPropTypes, diff --git a/src/elements/Input/Input.js b/src/elements/Input/Input.js index e40d394fa6..2e48417768 100644 --- a/src/elements/Input/Input.js +++ b/src/elements/Input/Input.js @@ -1,3 +1,4 @@ +import { handleRef } from '@stardust-ui/react-component-ref' import cx from 'classnames' import _ from 'lodash' import PropTypes from 'prop-types' @@ -10,7 +11,6 @@ import { customPropTypes, getElementType, getUnhandledProps, - handleRef, partitionHTMLProps, useKeyOnly, useValueAndKey, diff --git a/src/index.js b/src/index.js index 6982d1ad08..c2b47d7df2 100644 --- a/src/index.js +++ b/src/index.js @@ -1,3 +1,6 @@ +// Third party +export { Ref } from '@stardust-ui/react-component-ref' + // Addons export Confirm from './addons/Confirm' export MountNode from './addons/MountNode' @@ -6,9 +9,6 @@ export PaginationItem from './addons/Pagination/PaginationItem' export Portal from './addons/Portal' export PortalInner from './addons/Portal/PortalInner' export Radio from './addons/Radio' -export Ref from './addons/Ref' -export RefFindNode from './addons/Ref/RefFindNode' -export RefForward from './addons/Ref/RefForward' export Responsive from './addons/Responsive' export Select from './addons/Select' export TextArea from './addons/TextArea' diff --git a/src/lib/index.js b/src/lib/index.js index 8ed65fb4ba..337e4c648e 100644 --- a/src/lib/index.js +++ b/src/lib/index.js @@ -39,7 +39,6 @@ export { numberToWordMap, numberToWord } from './numberToWord' export normalizeOffset from './normalizeOffset' export normalizeTransitionDuration from './normalizeTransitionDuration' export objectDiff from './objectDiff' -export { handleRef, isRefObject } from './refUtils' // Heads up! We import/export for this module to safely remove it with "babel-plugin-filter-imports" export { makeDebugger } diff --git a/src/lib/refUtils.js b/src/lib/refUtils.js deleted file mode 100644 index efdd4b3195..0000000000 --- a/src/lib/refUtils.js +++ /dev/null @@ -1,34 +0,0 @@ -/** - * The function that correctly handles passing refs. - * - * @param {Function|Object} ref An ref object or function - * @param {HTMLElement} node A node that should be passed by ref - */ -export const handleRef = (ref, node) => { - if (process.env.NODE_ENV !== 'production') { - if (typeof ref === 'string') { - throw new Error( - [ - 'We do not support refs as string, this is a legacy API and will be likely to be removed in', - 'one of the future releases of React.', - ].join(' '), - ) - } - } - - if (typeof ref === 'function') { - ref(node) - return - } - - if (ref !== null && typeof ref === 'object') { - // The `current` property is defined as readonly, however it's a valid way because `ref` is a mutable object - // eslint-disable-next-line no-param-reassign - ref.current = node - } -} - -export const isRefObject = (ref) => - // https://github.com/facebook/react/blob/v16.8.2/packages/react-reconciler/src/ReactFiberCommitWork.js#L665 - // eslint-disable-next-line - ref !== null && typeof ref === 'object' && ref.hasOwnProperty('current') diff --git a/src/modules/Checkbox/Checkbox.js b/src/modules/Checkbox/Checkbox.js index 76f68cc342..ddb68463a1 100644 --- a/src/modules/Checkbox/Checkbox.js +++ b/src/modules/Checkbox/Checkbox.js @@ -1,9 +1,9 @@ +import { Ref } from '@stardust-ui/react-component-ref' import cx from 'classnames' import _ from 'lodash' import PropTypes from 'prop-types' import React, { createRef } from 'react' -import Ref from '../../addons/Ref' import { AutoControlledComponent as Component, createHTMLLabel, diff --git a/src/modules/Dimmer/DimmerInner.js b/src/modules/Dimmer/DimmerInner.js index dad0c75cab..0377ee9502 100644 --- a/src/modules/Dimmer/DimmerInner.js +++ b/src/modules/Dimmer/DimmerInner.js @@ -1,9 +1,9 @@ +import { Ref } from '@stardust-ui/react-component-ref' import cx from 'classnames' import _ from 'lodash' import PropTypes from 'prop-types' import React, { Component, createRef } from 'react' -import Ref from '../../addons/Ref' import { childrenUtils, customPropTypes, diff --git a/src/modules/Dropdown/Dropdown.js b/src/modules/Dropdown/Dropdown.js index 2a051705dd..5b460bb4eb 100644 --- a/src/modules/Dropdown/Dropdown.js +++ b/src/modules/Dropdown/Dropdown.js @@ -1,4 +1,5 @@ import EventStack from '@semantic-ui-react/event-stack' +import { Ref } from '@stardust-ui/react-component-ref' import cx from 'classnames' import keyboardKey from 'keyboard-key' import _ from 'lodash' @@ -18,7 +19,6 @@ import { useKeyOnly, useKeyOrValueAndKey, } from '../../lib' -import Ref from '../../addons/Ref' import Icon from '../../elements/Icon' import Label from '../../elements/Label' import DropdownDivider from './DropdownDivider' diff --git a/src/modules/Modal/Modal.js b/src/modules/Modal/Modal.js index d62993db11..8ab5e9186e 100644 --- a/src/modules/Modal/Modal.js +++ b/src/modules/Modal/Modal.js @@ -1,3 +1,4 @@ +import { Ref } from '@stardust-ui/react-component-ref' import cx from 'classnames' import _ from 'lodash' import PropTypes from 'prop-types' @@ -23,7 +24,6 @@ import ModalHeader from './ModalHeader' import ModalContent from './ModalContent' import ModalActions from './ModalActions' import ModalDescription from './ModalDescription' -import Ref from '../../addons/Ref' import { canFit, getLegacyStyles, isLegacy } from './utils' const debug = makeDebugger('modal') diff --git a/src/modules/Popup/Popup.js b/src/modules/Popup/Popup.js index ba068b0fb1..f5bf692d7d 100644 --- a/src/modules/Popup/Popup.js +++ b/src/modules/Popup/Popup.js @@ -1,4 +1,5 @@ import EventStack from '@semantic-ui-react/event-stack' +import { Ref } from '@stardust-ui/react-component-ref' import cx from 'classnames' import _ from 'lodash' import PropTypes from 'prop-types' @@ -18,7 +19,6 @@ import { useKeyOrValueAndKey, } from '../../lib' import Portal from '../../addons/Portal' -import Ref from '../../addons/Ref' import { placementMapping, positions, positionsMapping } from './lib/positions' import createReferenceProxy from './lib/createReferenceProxy' import PopupContent from './PopupContent' diff --git a/src/modules/Popup/lib/createReferenceProxy.js b/src/modules/Popup/lib/createReferenceProxy.js index 7928c24598..0e2a48f0d2 100644 --- a/src/modules/Popup/lib/createReferenceProxy.js +++ b/src/modules/Popup/lib/createReferenceProxy.js @@ -1,5 +1,5 @@ +import { isRefObject, toRefObject } from '@stardust-ui/react-component-ref' import _ from 'lodash' -import { isRefObject } from '../../../lib/refUtils' class ReferenceProxy { constructor(refObject) { @@ -31,12 +31,7 @@ class ReferenceProxy { * @see https://popper.js.org/popper-documentation.html#referenceObject */ const createReferenceProxy = _.memoize( - (reference) => - new ReferenceProxy( - // TODO: use toRefObject from Stardust - // https://github.com/stardust-ui/react/issues/998 - isRefObject(reference) ? reference : { current: reference }, - ), + (reference) => new ReferenceProxy(isRefObject(reference) ? reference : toRefObject(reference)), ) export default createReferenceProxy diff --git a/src/modules/Sidebar/Sidebar.js b/src/modules/Sidebar/Sidebar.js index 6bc421f13b..ba191df2b1 100644 --- a/src/modules/Sidebar/Sidebar.js +++ b/src/modules/Sidebar/Sidebar.js @@ -1,10 +1,10 @@ import EventStack from '@semantic-ui-react/event-stack' +import { Ref } from '@stardust-ui/react-component-ref' import cx from 'classnames' import _ from 'lodash' import PropTypes from 'prop-types' import React, { Component, createRef } from 'react' -import Ref from '../../addons/Ref' import { childrenUtils, customPropTypes, diff --git a/src/modules/Sticky/Sticky.js b/src/modules/Sticky/Sticky.js index 8ecdfb8297..abbdf6793d 100644 --- a/src/modules/Sticky/Sticky.js +++ b/src/modules/Sticky/Sticky.js @@ -1,3 +1,4 @@ +import { isRefObject } from '@stardust-ui/react-component-ref' import cx from 'classnames' import _ from 'lodash' import PropTypes from 'prop-types' @@ -9,7 +10,6 @@ import { getElementType, getUnhandledProps, isBrowser, - isRefObject, } from '../../lib' /** diff --git a/test/specs/addons/Ref/Ref-test.js b/test/specs/addons/Ref/Ref-test.js deleted file mode 100644 index 41834df2a7..0000000000 --- a/test/specs/addons/Ref/Ref-test.js +++ /dev/null @@ -1,40 +0,0 @@ -import faker from 'faker' -import React from 'react' - -import Ref from 'src/addons/Ref/Ref' -import * as common from 'test/specs/commonTests' -import { CompositeClass, ForwardedRef } from './fixtures' - -describe('Ref', () => { - common.isConformant(Ref, { rendersChildren: false }) - - describe('children', () => { - it('renders single child', () => { - const child =
- - shallow({child}).should.contain(child) - }) - - it('renders RefFindNode when a component is passed', () => { - const innerRef = React.createRef() - const wrapper = shallow( - - - , - ) - - wrapper.should.have.type(Ref.FindNode) - }) - - it('renders RefForward when a component wrapper with forwardRef() is passed', () => { - const innerRef = React.createRef() - const wrapper = shallow( - - - , - ) - - wrapper.should.have.type(Ref.Forward) - }) - }) -}) diff --git a/test/specs/addons/Ref/RefFindNode-test.js b/test/specs/addons/Ref/RefFindNode-test.js deleted file mode 100644 index db77474de6..0000000000 --- a/test/specs/addons/Ref/RefFindNode-test.js +++ /dev/null @@ -1,85 +0,0 @@ -import React from 'react' - -import RefFindNode from 'src/addons/Ref/RefFindNode' -import * as common from 'test/specs/commonTests' -import { sandbox } from 'test/utils' -import { CompositeClass, CompositeFunction, DOMClass, DOMFunction } from './fixtures' - -const mountNode = (Component, innerRef) => - mount( - - - , - ) - .find('#node') - .getDOMNode() - -describe('RefFindNode', () => { - common.isConformant(RefFindNode, { rendersChildren: false }) - - describe('innerRef', () => { - it('returns node from a functional component with DOM node', () => { - const innerRef = sandbox.spy() - const node = mountNode(DOMFunction, innerRef) - - innerRef.should.have.been.calledOnce() - innerRef.should.have.been.calledWithMatch(node) - }) - - it('returns node from a functional component', () => { - const innerRef = sandbox.spy() - const node = mountNode(CompositeFunction, innerRef) - - innerRef.should.have.been.calledOnce() - innerRef.should.have.been.calledWithMatch(node) - }) - - it('returns node from a class component with DOM node', () => { - const innerRef = sandbox.spy() - const node = mountNode(DOMClass, innerRef) - - innerRef.should.have.been.calledOnce() - innerRef.should.have.been.calledWithMatch(node) - }) - - it('returns node from a class component', () => { - const innerRef = sandbox.spy() - const node = mountNode(CompositeClass, innerRef) - - innerRef.should.have.been.calledOnce() - innerRef.should.have.been.calledWithMatch(node) - }) - - it('passes an updated node', () => { - const innerRef = sandbox.spy() - const wrapper = mount( - -
- , - ) - - innerRef.should.have.been.calledOnce() - innerRef.should.have.calledWithMatch({ tagName: 'DIV' }) - - wrapper.setProps({ children:
-)) diff --git a/test/specs/lib/refUtils-test.js b/test/specs/lib/refUtils-test.js deleted file mode 100644 index 0e2d035598..0000000000 --- a/test/specs/lib/refUtils-test.js +++ /dev/null @@ -1,52 +0,0 @@ -import React, { createRef } from 'react' - -import { handleRef, isRefObject } from 'src/lib/refUtils' -import { sandbox } from 'test/utils' - -describe('handleRef', () => { - it('throws an error when "ref" is string', () => { - expect(() => { - handleRef('ref', document.createElement('div')) - }).to.throw() - }) - - it('does not do anything when "ref" is null', () => { - expect(() => { - handleRef(null, document.createElement('div')) - }).to.not.throw() - }) - - it('calls with node when "ref" is function', () => { - const ref = sandbox.spy() - const node = document.createElement('div') - - handleRef(ref, node) - ref.should.have.calledWith(node) - }) - - it('assigns to "current" when "ref" is object', () => { - const ref = React.createRef() - const node = document.createElement('div') - - handleRef(ref, node) - ref.should.have.property('current', node) - }) -}) - -describe('isRefObject', () => { - it('returns a correct result for each input', () => { - const fixtures = [ - { value: true, result: false }, - { value: null, result: false }, - { value: '', result: false }, - { value: {}, result: false }, - - { value: createRef(), result: true }, - { value: { current: document.createElement('div') }, result: true }, - ] - - fixtures.forEach((fixture) => { - expect(isRefObject(fixture.value)).to.equal(fixture.result) - }) - }) -}) diff --git a/test/utils/nestedShallow.js b/test/utils/nestedShallow.js index 105f094db0..d017d5e9d2 100644 --- a/test/utils/nestedShallow.js +++ b/test/utils/nestedShallow.js @@ -1,8 +1,7 @@ +import { Ref } from '@stardust-ui/react-component-ref' import enzyme from 'enzyme' import _ from 'lodash' -import Ref from 'src/addons/Ref' - const diveToLevel = (wrapper, autoNesting, nestingLevel) => { let nestedWrapper = wrapper diff --git a/tsconfig.json b/tsconfig.json index f1a0c693cc..7a51f52204 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,6 +1,7 @@ { "compilerOptions": { "jsx": "react", + "lib": ["dom", "es2015"], "module": "esnext", "moduleResolution": "node", "strict": true diff --git a/yarn.lock b/yarn.lock index 990759105f..eced43549e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -991,6 +991,15 @@ prismjs "^1.16.0" prop-types "^15.6.1" +"@stardust-ui/react-component-ref@~0.38.0": + version "0.38.0" + resolved "https://registry.yarnpkg.com/@stardust-ui/react-component-ref/-/react-component-ref-0.38.0.tgz#52d555f2d5edd213c923c93a106f7de940e427ef" + integrity sha512-xjs6WnvJVueSIXMWw0C3oWIgAPpcD03qw43oGOjUXqFktvpNkB73JoKIhS4sCrtQxBdct75qqr4ZL6JiyPcESw== + dependencies: + "@babel/runtime" "^7.1.2" + prop-types "^15.7.2" + react-is "^16.6.3" + "@textlint/ast-node-types@^4.0.3": version "4.2.1" resolved "https://registry.yarnpkg.com/@textlint/ast-node-types/-/ast-node-types-4.2.1.tgz#978fa10e23468114462fc08ef29f96980c12a8ef" @@ -1042,9 +1051,10 @@ "@types/history" "*" "@types/react" "*" -"@types/react@*", "@types/react@^16.0.18", "@types/react@^16.4.14": - version "16.4.18" - resolved "https://registry.yarnpkg.com/@types/react/-/react-16.4.18.tgz#2e28a2e7f92d3fa7d6a65f2b73275c3e3138a13d" +"@types/react@*", "@types/react@^16.0.18", "@types/react@^16.8.25": + version "16.9.2" + resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.2.tgz#6d1765431a1ad1877979013906731aae373de268" + integrity sha512-jYP2LWwlh+FTqGd9v7ynUKZzjj98T8x7Yclz479QdRhHfuW9yQ+0jjnD31eXSXutmBpppj5PYNLYLRfnZJvcfg== dependencies: "@types/prop-types" "*" csstype "^2.2.0" @@ -3774,14 +3784,6 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4: safe-buffer "^5.0.1" sha.js "^2.4.8" -create-react-context@<=0.2.2: - version "0.2.2" - resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.2.2.tgz#9836542f9aaa22868cd7d4a6f82667df38019dca" - integrity sha512-KkpaLARMhsTsgp0d2NA/R94F/eDLbhXERdIq3LvX2biCAXcDvHYoOqHfWCHf1+OLj+HKBotLG3KqaOOf+C1C+A== - dependencies: - fbjs "^0.8.0" - gud "^1.0.0" - create-react-context@^0.2.2: version "0.2.3" resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.2.3.tgz#9ec140a6914a22ef04b8b09b7771de89567cb6f3" @@ -3789,6 +3791,14 @@ create-react-context@^0.2.2: fbjs "^0.8.0" gud "^1.0.0" +create-react-context@^0.3.0: + version "0.3.0" + resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.3.0.tgz#546dede9dc422def0d3fc2fe03afe0bc0f4f7d8c" + integrity sha512-dNldIoSuNSvlTJ7slIKC/ZFGKexBMBrrcc+TTe1NdmROnaASuLPvqpwj9v4XS4uXZ8+YPu0sNmShX2rXI5LNsw== + dependencies: + gud "^1.0.0" + warning "^4.0.3" + cross-env@^5.2.0: version "5.2.0" resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-5.2.0.tgz#6ecd4c015d5773e614039ee529076669b9d126f2" @@ -10037,13 +10047,13 @@ react-node-resolver@^1.0.1: resolved "https://registry.yarnpkg.com/react-node-resolver/-/react-node-resolver-1.0.1.tgz#1798a729c0e218bf2f0e8ddf79c550d4af61d83a" integrity sha1-F5inKcDiGL8vDo3fecVQ1K9h2Do= -react-popper@^1.3.3: - version "1.3.3" - resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-1.3.3.tgz#2c6cef7515a991256b4f0536cd4bdcb58a7b6af6" - integrity sha512-ynMZBPkXONPc5K4P5yFWgZx5JGAUIP3pGGLNs58cfAPgK67olx7fmLp+AdpZ0+GoQ+ieFDa/z4cdV6u7sioH6w== +react-popper@^1.3.4: + version "1.3.4" + resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-1.3.4.tgz#f0cd3b0d30378e1f663b0d79bcc8614221652ced" + integrity sha512-9AcQB29V+WrBKk6X7p0eojd1f25/oJajVdMZkywIoAV6Ag7hzE1Mhyeup2Q1QnvFRtGQFQvtqfhlEoDAPfKAVA== dependencies: "@babel/runtime" "^7.1.2" - create-react-context "<=0.2.2" + create-react-context "^0.3.0" popper.js "^1.14.4" prop-types "^15.6.1" typed-styles "^0.0.7" @@ -12586,7 +12596,7 @@ void-elements@^2.0.0: version "2.0.1" resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec" -warning@^4.0.2: +warning@^4.0.2, warning@^4.0.3: version "4.0.3" resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3" integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==