diff --git a/packages/patternfly-4/react-core/src/internal/GenerateId/GenerateId.js b/packages/patternfly-4/react-core/src/internal/GenerateId/GenerateId.js new file mode 100644 index 00000000000..c17beab313d --- /dev/null +++ b/packages/patternfly-4/react-core/src/internal/GenerateId/GenerateId.js @@ -0,0 +1,42 @@ +/** This Component can be used to wrap a functional component in order to generate a random ID + * Example of how to use this component + * + * const Component = ({id}) => ( + * {randomId => ( + *
+ * div with random ID + *
+ * )} + *
+ * ); + * + * Component.propTypes = { + * id: PropTypes.string + * } + */ + +import React from 'react'; +import PropTypes from 'prop-types'; + +let currentId = 0; + +const propTypes = { + /** String to prefix the random id with */ + prefix: PropTypes.string, + /** Component to be rendered with the generated id */ + children: PropTypes.func.isRequired +}; + +class GenerateId extends React.Component { + static defaultProps = { + prefix: 'pf-random-id-' + }; + static propTypes = propTypes; + id = `${this.props.prefix}${currentId++}`; + + render() { + return this.props.children(this.id); + } +} + +export default GenerateId; diff --git a/packages/patternfly-4/react-core/src/internal/GenerateId/GenerateId.test.js b/packages/patternfly-4/react-core/src/internal/GenerateId/GenerateId.test.js new file mode 100644 index 00000000000..5dbbc0f5956 --- /dev/null +++ b/packages/patternfly-4/react-core/src/internal/GenerateId/GenerateId.test.js @@ -0,0 +1,9 @@ +import React from 'react'; +import { shallow } from 'enzyme'; +import GenerateId from './GenerateId'; + +test('generates id', () => { + const view = shallow({id =>
div with random ID
}
); + + expect(view).toMatchSnapshot(); +}); diff --git a/packages/patternfly-4/react-core/src/internal/GenerateId/__snapshots__/GenerateId.test.js.snap b/packages/patternfly-4/react-core/src/internal/GenerateId/__snapshots__/GenerateId.test.js.snap new file mode 100644 index 00000000000..7b906855a01 --- /dev/null +++ b/packages/patternfly-4/react-core/src/internal/GenerateId/__snapshots__/GenerateId.test.js.snap @@ -0,0 +1,9 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`generates id 1`] = ` +
+ div with random ID +
+`;