feat(ContextSelector): Convert context selector to typescript

packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelector.md

@@ -1,6 +1,7 @@
 ---
 title: 'Context selector'
 propComponents: ['ContextSelector', 'ContextSelectorItem']
+typescript: true
 ---
 
 import { ContextSelector, ContextSelectorItem } from '@patternfly/react-core';

packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelector.test.js → packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelector.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow, mount } from 'enzyme';
-import ContextSelector from './ContextSelector';
-import ContextSelectorItem from './ContextSelectorItem';
+import { ContextSelector } from './ContextSelector';
+import { ContextSelectorItem } from './ContextSelectorItem';
 
 const items = [
   <ContextSelectorItem key="0">My Project</ContextSelectorItem>,

packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelector.js → packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelector.tsx

@@ -1,67 +1,71 @@
-import React from 'react';
-import styles from '@patternfly/react-styles/css/components/ContextSelector/context-selector';
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/ContextSelector/context-selector'
 import { css } from '@patternfly/react-styles';
-import PropTypes from 'prop-types';
-import FocusTrap from 'focus-trap-react';
 import { SearchIcon } from '@patternfly/react-icons';
-import ContextSelectorToggle from './ContextSelectorToggle';
-import ContextSelectorMenuList from './ContextSelectorMenuList';
+import { ContextSelectorToggle } from './ContextSelectorToggle';
+import { ContextSelectorMenuList } from './ContextSelectorMenuList';
 import { ContextSelectorContext } from './contextSelectorConstants';
 import { Button, ButtonVariant } from '../Button';
 import { TextInput } from '../TextInput';
 import { InputGroup } from '../InputGroup';
 import { KEY_CODES } from '../../helpers/constants';
 
+// Can't use ES6 imports :(
+// The types for it are also wrong, we should probably ditch this dependency.
+// tslint:disable-next-line
+const FocusTrap: any = require('focus-trap-react');
+
 // seed for the aria-labelledby ID
 let currentId = 0;
 const newId = currentId++;
 
-const propTypes = {
+export interface ContextSelectorProps {
   /** content rendered inside the Context Selector */
-  children: PropTypes.node,
+  children?: React.ReactNode;
   /** Classes applied to root element of Context Selector */
-  className: PropTypes.string,
+  className?: string;
   /** Flag to indicate if Context Selector is opened */
-  isOpen: PropTypes.bool,
+  isOpen?: boolean;
   /** Function callback called when user clicks toggle button */
-  onToggle: PropTypes.func,
+  onToggle?: (value: boolean) => void;
   /** Function callback called when user selects item */
-  onSelect: PropTypes.func,
+  onSelect?: (event: any, value: React.ReactNode) => void;
   /** Labels the Context Selector for Screen Readers */
-  screenReaderLabel: PropTypes.string,
+  screenReaderLabel?: string;
   /** Text that appears in the Context Selector Toggle */
-  toggleText: PropTypes.string,
+  toggleText?: string;
   /** aria-label for the Context Selector Search Button */
-  searchButtonAriaLabel: PropTypes.string,
+  searchButtonAriaLabel?: string;
   /** Value in the Search field */
-  searchInputValue: PropTypes.string,
+  searchInputValue?: string;
   /** Function callback called when user changes the Search Input */
-  onSearchInputChange: PropTypes.func,
+  onSearchInputChange?(value: string): void; 
   /** Search Input placeholder */
-  searchInputPlaceholder: PropTypes.string,
+  searchInputPlaceholder?: string;
   /** Function callback for when Search Button is clicked */
-  onSearchButtonClick: PropTypes.func
-};
+  onSearchButtonClick?(event?: React.SyntheticEvent<HTMLButtonElement>): void; 
+}
+
+export class ContextSelector extends React.Component<ContextSelectorProps> {
 
-const defaultProps = {
-  children: null,
-  className: '',
-  isOpen: false,
-  onToggle: () => {},
-  onSelect: () => {},
-  screenReaderLabel: '',
-  toggleText: '',
-  searchButtonAriaLabel: 'Search menu items',
-  searchInputValue: '',
-  onSearchInputChange: () => {},
-  searchInputPlaceholder: 'Search',
-  onSearchButtonClick: () => {}
-};
+  static defaultProps = {
+    children: null as React.ReactNode,
+    className: '',
+    isOpen: false,
+    onToggle: () => undefined as any,
+    onSelect: () => undefined as any,
+    screenReaderLabel: '',
+    toggleText: '',
+    searchButtonAriaLabel: 'Search menu items',
+    searchInputValue: '',
+    onSearchInputChange: () => undefined as any,
+    searchInputPlaceholder: 'Search',
+    onSearchButtonClick: () => undefined as any
+  }
 
-class ContextSelector extends React.Component {
-  parentRef = React.createRef();
+  parentRef: React.RefObject<HTMLDivElement> = React.createRef();
 
-  onEnterPressed = event => {
+  onEnterPressed = (event: any) => {
     if (event.charCode === KEY_CODES.ENTER) {
       this.props.onSearchButtonClick();
     }
@@ -140,8 +144,3 @@ class ContextSelector extends React.Component {
     );
   }
 }
-
-ContextSelector.propTypes = propTypes;
-ContextSelector.defaultProps = defaultProps;
-
-export default ContextSelector;

packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelectorItem.test.js → packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelectorItem.test.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { shallow, mount } from 'enzyme';
-import ContextSelectorItem from './ContextSelectorItem';
+import { ContextSelectorItem } from './ContextSelectorItem';
 
 test('Renders ContextSelectorItem', () => {
   const view = shallow(
-    <ContextSelectorItem sendRef={jest.fn()} index="0">
+    <ContextSelectorItem sendRef={jest.fn()} index={0}>
       My Project
     </ContextSelectorItem>
   );
@@ -13,7 +13,7 @@ test('Renders ContextSelectorItem', () => {
 
 test('Renders ContextSelectorItem disabled and hovered', () => {
   const view = shallow(
-    <ContextSelectorItem isDisabled isHovered sendRef={jest.fn()} index="0">
+    <ContextSelectorItem isDisabled isHovered sendRef={jest.fn()} index={0}>
       My Project
     </ContextSelectorItem>
   );
@@ -23,7 +23,7 @@ test('Renders ContextSelectorItem disabled and hovered', () => {
 test('Verify onClick is called ', () => {
   const mockfn = jest.fn();
   const view = mount(
-    <ContextSelectorItem isHovered onClick={mockfn} sendRef={jest.fn()} index="0">
+    <ContextSelectorItem isHovered onClick={mockfn} sendRef={jest.fn()} index={0}>
       My Project
     </ContextSelectorItem>
   );

packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelectorItem.js → packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelectorItem.tsx

@@ -1,40 +1,38 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/ContextSelector/context-selector';
 import { css } from '@patternfly/react-styles';
 import { ContextSelectorContext } from './contextSelectorConstants';
 
-const propTypes = {
+export interface ContextSelectorItemProps {
   /** Anything which can be rendered as Context Selector item */
-  children: PropTypes.node,
+  children?: React.ReactNode; 
   /** Classes applied to root element of the Context Selector item */
-  className: PropTypes.string,
+  className?: string; 
   /** Render Context  Selector item as disabled */
-  isDisabled: PropTypes.bool,
+  isDisabled?: boolean; 
+  // isSelected?
   /** Forces display of the hover state of the element */
-  isHovered: PropTypes.bool,
+  isHovered?: boolean; 
   /** Callback for click event */
-  onClick: PropTypes.func,
+  onClick: (event: React.MouseEvent) => void; 
   /** internal index of the item */
-  index: PropTypes.number,
+  index: number; 
   /** Internal callback for ref tracking */
-  sendRef: PropTypes.func,
-  /** Additional props are spread to the button element */
-  '': PropTypes.any // eslint-disable-line react/require-default-props
-};
-
-const defaultProps = {
-  children: null,
-  className: '',
-  isHovered: false,
-  isDisabled: false,
-  onClick: () => {},
-  index: undefined,
-  sendRef: Function.prototype
-};
+  sendRef: (index: number, current: any) => void; 
+}
 
-class ContextSelectorItem extends React.Component {
-  ref = React.createRef();
+export class ContextSelectorItem extends React.Component<ContextSelectorItemProps>{
+  static defaultProps = {
+    children: null as React.ReactNode,
+    className: '',
+    isHovered: false,
+    isDisabled: false,
+    onClick: (): any => undefined,
+    index: undefined as number,
+    sendRef: Function.prototype
+  }
+
+  ref: React.RefObject<HTMLButtonElement> = React.createRef();
 
   componentDidMount() {
     /* eslint-disable-next-line */
@@ -57,8 +55,8 @@ class ContextSelectorItem extends React.Component {
               ref={this.ref}
               onClick={event => {
                 if (!isDisabled) {
-                  onClick && onClick(event);
-                  onSelect && onSelect(event, children);
+                  onClick(event);
+                  onSelect(event, children);
                 }
               }}
               {...props}
@@ -71,8 +69,3 @@ class ContextSelectorItem extends React.Component {
     );
   }
 }
-
-ContextSelectorItem.propTypes = propTypes;
-ContextSelectorItem.defaultProps = defaultProps;
-
-export default ContextSelectorItem;

packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelectorMenuList.test.js → packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelectorMenuList.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import ContextSelectorItem from './ContextSelectorItem';
-import ContextSelectorMenuList from './ContextSelectorMenuList';
+import { ContextSelectorItem } from './ContextSelectorItem';
+import { ContextSelectorMenuList } from './ContextSelectorMenuList';
 
 const items = [
   <ContextSelectorItem key="0">My Project</ContextSelectorItem>,
@@ -13,14 +13,17 @@ const items = [
 
 test('Renders ContextSelectorMenuList open', () => {
   const view = shallow(
-    <ContextSelectorMenuList isOpen openedOnEnter={false}>
+    <ContextSelectorMenuList isOpen={false}>
       {items}
     </ContextSelectorMenuList>
   );
   expect(view).toMatchSnapshot();
 });
 
 test('Renders ContextSelectorMenuList closed', () => {
-  const view = shallow(<ContextSelectorMenuList openedOnEnter={false}>{items}</ContextSelectorMenuList>);
+  const view = shallow(
+    <ContextSelectorMenuList isOpen={false}>
+      {items}
+    </ContextSelectorMenuList>);
   expect(view).toMatchSnapshot();
 });