TypeScriptified basic_table.

scripts/babel/proptypes-from-ts-props/index.js

@@ -421,6 +421,15 @@ function getPropTypesForNode(node, optional, state) {
     //       ^^^ Foo
     case 'TSTypeAnnotation':
       propType = getPropTypesForNode(node.typeAnnotation, true, state);
+
+      if (
+        types.isLiteral(propType) ||
+        (types.isIdentifier(propType) &&
+          propType.name === 'undefined')
+      ) {
+        // can't use a literal straight, wrap it with PropTypes.oneOf([ the_literal ])
+        propType = convertLiteralToOneOf(types, propType);
+      }
       break;
 
     // Foo['bar']
@@ -538,7 +547,11 @@ function getPropTypesForNode(node, optional, state) {
           ];
 
           let propTypeValue = typeProperty.value;
-          if (types.isLiteral(propTypeValue)) {
+          if (
+            types.isLiteral(propTypeValue) ||
+            (types.isIdentifier(propTypeValue) &&
+              propTypeValue.name === 'undefined')
+          ) {
             // can't use a literal straight, wrap it with PropTypes.oneOf([ the_literal ])
             propTypeValue = convertLiteralToOneOf(types, propTypeValue);
           }
@@ -628,7 +641,7 @@ function getPropTypesForNode(node, optional, state) {
               // which don't translate to prop types.
               .filter(property => property.key != null)
               .map(property => {
-                const propertyPropType =
+                let propertyPropType =
                   property.type === 'TSMethodSignature'
                     ? getPropTypesForNode(
                         { type: 'TSFunctionType' },
@@ -641,6 +654,17 @@ function getPropTypesForNode(node, optional, state) {
                         state
                       );
 
+                if (
+                  types.isLiteral(propertyPropType) ||
+                  (types.isIdentifier(propertyPropType) &&
+                    propertyPropType.name === 'undefined')
+                ) {
+                  propertyPropType = convertLiteralToOneOf(types, propertyPropType);
+                  if (!property.optional) {
+                    propertyPropType = makePropTypeRequired(types, propertyPropType);
+                  }
+                }
+
                 const objectProperty = types.objectProperty(
                   types.identifier(
                     property.key.name || `"${property.key.value}"`

scripts/babel/proptypes-from-ts-props/index.test.js

@@ -143,6 +143,35 @@ FooComponent.propTypes = {
 };`);
       });
 
+      it('understands undefined & null props', () => {
+        const result = transform(
+          `
+import React from 'react';
+interface IFooProps {
+  foo: undefined;
+  bar: null;
+  bazz: undefined | null;
+}
+const FooComponent: React.SFC<IFooProps> = () => {
+  return (<div>Hello World</div>);
+}`,
+          babelOptions
+        );
+
+        expect(result.code).toBe(`import React from 'react';
+import PropTypes from "prop-types";
+
+const FooComponent = () => {
+  return <div>Hello World</div>;
+};
+
+FooComponent.propTypes = {
+  foo: PropTypes.oneOf([undefined]).isRequired,
+  bar: PropTypes.oneOf([null]).isRequired,
+  bazz: PropTypes.oneOf([undefined, null]).isRequired
+};`);
+      });
+
       it('understands function props', () => {
         const result = transform(
           `
@@ -224,6 +253,33 @@ FooComponent.propTypes = {
 };`);
       });
 
+      it('understands literal values as a type', () => {
+        const result = transform(
+          `
+import React from 'react';
+interface IFooProps {
+  foo: 'bar';
+  bazz?: 5;
+}
+const FooComponent: React.SFC<IFooProps> = () => {
+  return (<div>Hello World</div>);
+}`,
+          babelOptions
+        );
+
+        expect(result.code).toBe(`import React from 'react';
+import PropTypes from "prop-types";
+
+const FooComponent = () => {
+  return <div>Hello World</div>;
+};
+
+FooComponent.propTypes = {
+  foo: PropTypes.oneOf(["bar"]).isRequired,
+  bazz: PropTypes.oneOf([5])
+};`);
+      });
+
     });
 
     describe('function propTypes', () => {
@@ -1117,7 +1173,7 @@ const FooComponent = () => {
 };
 
 FooComponent.propTypes = {
-  type: PropTypes.oneOfType([PropTypes.oneOf(["foo"]), PropTypes.oneOf(["bar"])]),
+  type: PropTypes.oneOfType([PropTypes.oneOf(["foo"]).isRequired, PropTypes.oneOf(["bar"]).isRequired]).isRequired,
   value: PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.number.isRequired]).isRequired
 };`);
       });
@@ -1479,6 +1535,40 @@ FooComponent.propTypes = {
 };`);
         });
 
+        it('understands discriminated unions', () => {
+          const result = transform(
+            `
+import React from 'react'
+interface OptA { type: 'a'; value: string; }
+interface OptB { type: 'b'; valid: boolean; }
+type Option = OptA | OptB;
+interface Props { option: Option }
+const Foo: React.SFC<Props> = ({ option }: Props) => {
+  return (<div>{option.type == 'a' ? option.value : option.valid}</div>);
+}`,
+            babelOptions
+          );
+
+          expect(result.code).toBe(`import React from 'react';
+import PropTypes from "prop-types";
+
+const Foo = ({
+  option
+}) => {
+  return <div>{option.type == 'a' ? option.value : option.valid}</div>;
+};
+
+Foo.propTypes = {
+  option: PropTypes.oneOfType([PropTypes.shape({
+    type: PropTypes.oneOf(["a"]).isRequired,
+    value: PropTypes.string.isRequired
+  }).isRequired, PropTypes.shape({
+    type: PropTypes.oneOf(["b"]).isRequired,
+    valid: PropTypes.bool.isRequired
+  }).isRequired]).isRequired
+};`);
+        });
+
         it('understands an optional Array of strings and numbers', () => {
           const result = transform(
             `

src-docs/src/i18ntokens.json

@@ -13,7 +13,7 @@
         "column": 14
       }
     },
-    "filepath": "src/components/basic_table/basic_table.js"
+    "filepath": "src/components/basic_table/basic_table.tsx"
   },
   {
     "token": "euiBasicTable.selectAllRows",
@@ -29,7 +29,7 @@
         "column": 77
       }
     },
-    "filepath": "src/components/basic_table/basic_table.js"
+    "filepath": "src/components/basic_table/basic_table.tsx"
   },
   {
     "token": "euiBasicTable.selectThisRow",
@@ -45,39 +45,39 @@
         "column": 79
       }
     },
-    "filepath": "src/components/basic_table/basic_table.js"
+    "filepath": "src/components/basic_table/basic_table.tsx"
   },
   {
     "token": "euiCollapsedItemActions.allActions",
     "defString": "All actions",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 107,
+        "line": 148,
         "column": 6
       },
       "end": {
-        "line": 107,
+        "line": 148,
         "column": 80
       }
     },
-    "filepath": "src/components/basic_table/collapsed_item_actions.js"
+    "filepath": "src/components/basic_table/collapsed_item_actions.tsx"
   },
   {
     "token": "euiCollapsedItemActions.allActions",
     "defString": "All actions",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 124,
+        "line": 165,
         "column": 6
       },
       "end": {
-        "line": 124,
+        "line": 165,
         "column": 80
       }
     },
-    "filepath": "src/components/basic_table/collapsed_item_actions.js"
+    "filepath": "src/components/basic_table/collapsed_item_actions.tsx"
   },
   {
     "token": "euiBottomBar.screenReaderAnnouncement",
@@ -1685,11 +1685,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 49,
+        "line": 60,
         "column": 8
       },
       "end": {
-        "line": 49,
+        "line": 60,
         "column": 72
       }
     },

src/components/basic_table/__snapshots__/basic_table.test.js.snap → src/components/basic_table/__snapshots__/basic_table.test.tsx.snap

@@ -374,7 +374,7 @@ exports[`EuiBasicTable empty renders a node as a custom message 1`] = `
             <p>
               no items, click 
               <a
-                href={true}
+                href=""
               >
                 here
               </a>

src/components/basic_table/__snapshots__/custom_item_action.test.js.snap → src/components/basic_table/__snapshots__/custom_item_action.test.tsx.snap

@@ -2,11 +2,13 @@
 
 exports[`CustomItemAction render 1`] = `
 <div
-  style={null}
+  className="test"
 >
-  <Component
+  <span
     onBlur={[Function]}
     onFocus={[Function]}
-  />
+  >
+    test
+  </span>
 </div>
 `;

src/components/basic_table/__snapshots__/default_item_action.test.js.snap → src/components/basic_table/__snapshots__/default_item_action.test.tsx.snap

@@ -1,5 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`DefaultItemAction render - default button 1`] = `
+<EuiToolTip
+  content="action 1"
+  delay="long"
+  position="top"
+>
+  <EuiButtonEmpty
+    color="primary"
+    flush="right"
+    isDisabled={false}
+    onClick={[Function]}
+    size="s"
+  >
+    action1
+  </EuiButtonEmpty>
+</EuiToolTip>
+`;
+
 exports[`DefaultItemAction render - button 1`] = `
 <EuiToolTip
   content="action 1"

src/components/basic_table/__snapshots__/expanded_item_actions.test.js.snap → src/components/basic_table/__snapshots__/expanded_item_actions.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ExpandedItemActions render 1`] = `
-Array [
+<Fragment>
   <DefaultItemAction
     action={
       Object {
@@ -12,15 +12,13 @@ Array [
     }
     className=""
     enabled={true}
-    index={0}
     item={
       Object {
         "id": "xyz",
       }
     }
-    itemId="xyz"
     key="item_action_xyz_0"
-  />,
+  />
   <CustomItemAction
     action={
       Object {
@@ -37,8 +35,7 @@ Array [
         "id": "xyz",
       }
     }
-    itemId="xyz"
     key="item_action_xyz_1"
-  />,
-]
+  />
+</Fragment>
 `;