TypeScriptified basic_table. (#2428)

* TypeScriptify custom_item_action. * TypeScriptify default_item_action. * Created action_types.ts. * Added missing props in DefaultItemAction. * TypeScriptify expanded_item_actions. * TypeScriptify CollapsedItemActions. * TypeScriptify LoadingTableBody. * TypeScriptify PaginationBar. * TypeScriptify BasicTable. * Removed anys. * Removed more anys. * Removed any in item and itemId. * TypeScriptify EuiInMemoryTable. * Fixed bug in PropType generation. * Clean up. * Used Omit. * Thread generics throughout EuiBasicTable Make it possible to type-check the props of EuiBasicTable and EuiInMemoryTable more effectively by making their props generic, and using the generic parameter throughout the tables' types. * Tweaks * More tweaks * Even more tweaks * Added responsive prop to EuiInMemoryTable. * any -> Event. Co-Authored-By: Rory Hunter <pugnascotia@users.noreply.github.com> * Fixed selectable test failure. * Renamed prop interfaces. * Some typescript updates * ts->proptypes test for direct-usage literal values * Update: State -> CollapsedItemActionsState Co-Authored-By: Chandler Prall <chandler.prall@gmail.com> * Update: State -> CollapsedItemActionsState Co-Authored-By: Chandler Prall <chandler.prall@gmail.com> * Update State -> CustomItemActionState Co-Authored-By: Chandler Prall <chandler.prall@gmail.com> * Update State -> CustomItemActionState Co-Authored-By: Chandler Prall <chandler.prall@gmail.com> * clean up types in in_memory_table * Fixed ExpandedItemActions snapshot. Because it has some props that don't exist anymore. * Remove more anys. * Updated i18ntokens.json. * TypeScriptify custom_item_action. * TypeScriptify default_item_action. * Created action_types.ts. * Added missing props in DefaultItemAction. * TypeScriptify expanded_item_actions. * TypeScriptify CollapsedItemActions. * TypeScriptify LoadingTableBody. * TypeScriptify PaginationBar. * TypeScriptify BasicTable. * Removed anys. * Removed more anys. * Removed any in item and itemId. * TypeScriptify EuiInMemoryTable. * Fixed bug in PropType generation. * Clean up. * Used Omit. * Thread generics throughout EuiBasicTable Make it possible to type-check the props of EuiBasicTable and EuiInMemoryTable more effectively by making their props generic, and using the generic parameter throughout the tables' types. * Tweaks * More tweaks * Even more tweaks * Added responsive prop to EuiInMemoryTable. * any -> Event. Co-Authored-By: Rory Hunter <pugnascotia@users.noreply.github.com> * Fixed selectable test failure. * Renamed prop interfaces. * Some typescript updates * ts->proptypes test for direct-usage literal values * Update: State -> CollapsedItemActionsState Co-Authored-By: Chandler Prall <chandler.prall@gmail.com> * Update: State -> CollapsedItemActionsState Co-Authored-By: Chandler Prall <chandler.prall@gmail.com> * Update State -> CustomItemActionState Co-Authored-By: Chandler Prall <chandler.prall@gmail.com> * Update State -> CustomItemActionState Co-Authored-By: Chandler Prall <chandler.prall@gmail.com> * clean up types in in_memory_table * Fixed ExpandedItemActions snapshot. Because it has some props that don't exist anymore. * Remove more anys. * more types * guarantee the page argument in table callbacks if pagination is provided * rebased against master * export EuiBasicTableColumn type * Added TD attributes to field and computed column types * Accept string | number for EuiTableSortMobile's key * changelog
elastic · Dec 9, 2019 · 04662e8 · 04662e8
1 parent 0ab717d
commit 04662e8
Show file tree

Hide file tree

Showing 44 changed files with 2,056 additions and 1,384 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added TypeScript definitions for `EuiBasicTable`, `EuiInMemoryTable`, and related components ([#2428](https://github.com/elastic/eui/pull/2428))
+
 **Bug fixes**
 
 - Fixed UX/focus bug in `EuiDataGrid` when using keyboard shortcuts to paginate ([#2602](https://github.com/elastic/eui/pull/2602))

diff --git a/scripts/babel/proptypes-from-ts-props/index.js b/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}"`

diff --git a/scripts/babel/proptypes-from-ts-props/index.test.js b/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(
             `

diff --git a/src-docs/src/i18ntokens.json b/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
       }
     },

diff --git a/...le/__snapshots__/basic_table.test.js.snap → ...e/__snapshots__/basic_table.test.tsx.snap b/...le/__snapshots__/basic_table.test.js.snap → ...e/__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>

diff --git a/...ots__/collapsed_item_actions.test.js.snap → ...ts__/collapsed_item_actions.test.tsx.snap b/...ots__/collapsed_item_actions.test.js.snap → ...ts__/collapsed_item_actions.test.tsx.snap
diff --git a/...apshots__/custom_item_action.test.js.snap → ...pshots__/custom_item_action.test.tsx.snap b/...apshots__/custom_item_action.test.js.snap → ...pshots__/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>
 `;
diff --git a/...pshots__/default_item_action.test.js.snap → ...shots__/default_item_action.test.tsx.snap b/...pshots__/default_item_action.test.js.snap → ...shots__/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"

diff --git a/...hots__/expanded_item_actions.test.js.snap → ...ots__/expanded_item_actions.test.tsx.snap b/...hots__/expanded_item_actions.test.js.snap → ...ots__/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>
 `;
-Original file line number
+Diff line change
@@ Expand Up @@
                 <p>
                   no items, click
                   <a
-                    href={true}
+                    href=""
                   >
                     here
                   </a>
@@ Expand Down @@