[docs] Add remaining TypeScript component demos (#15755)

* [docs] Add IntegrationDownshift TypeScript demo * [docs] Add EnhancedTable TypeScript demo * [docs] Add ReactVirtualizedTable TypeScript demo
mui · May 21, 2019 · f32d82e · f32d82e
1 parent a33f0ab
commit f32d82e
Show file tree

Hide file tree

Showing 9 changed files with 1,055 additions and 75 deletions.
diff --git a/docs/src/pages/components/autocomplete/IntegrationDownshift.js b/docs/src/pages/components/autocomplete/IntegrationDownshift.js
@@ -64,7 +64,8 @@ function renderInput(inputProps) {
   );
 }
 
-function renderSuggestion({ suggestion, index, itemProps, highlightedIndex, selectedItem }) {
+function renderSuggestion(suggestionProps) {
+  const { suggestion, index, itemProps, highlightedIndex, selectedItem } = suggestionProps;
   const isHighlighted = highlightedIndex === index;
   const isSelected = (selectedItem || '').indexOf(suggestion.label) > -1;
 
@@ -174,6 +175,7 @@ function DownshiftMultiple(props) {
             }),
             label: 'Label',
           })}
+
           {isOpen ? (
             <Paper className={classes.paper} square>
               {getSuggestions(inputValue2).map((suggestion, index) =>
@@ -253,6 +255,7 @@ function IntegrationDownshift() {
                 placeholder: 'Search a country (start with a)',
               }),
             })}
+
             <div {...getMenuProps()}>
               {isOpen ? (
                 <Paper className={classes.paper} square>
@@ -295,11 +298,12 @@ function IntegrationDownshift() {
                 popperNode = node;
               },
             })}
+
             <Popper open={isOpen} anchorEl={popperNode}>
               <div {...(isOpen ? getMenuProps({}, { suppressRefError: true }) : {})}>
                 <Paper
                   square
-                  style={{ marginTop: 8, width: popperNode ? popperNode.clientWidth : null }}
+                  style={{ marginTop: 8, width: popperNode ? popperNode.clientWidth : undefined }}
                 >
                   {getSuggestions(inputValue).map((suggestion, index) =>
                     renderSuggestion({
@@ -334,7 +338,7 @@ function IntegrationDownshift() {
               fullWidth: true,
               classes,
               InputProps: getInputProps({
-                onFocus: openMenu,
+                onFocus: () => openMenu(),
                 onChange: event => {
                   if (event.target.value === '') {
                     clearSelection();
@@ -343,6 +347,7 @@ function IntegrationDownshift() {
                 placeholder: 'With the clear & show empty options',
               }),
             })}
+
             <div {...getMenuProps()}>
               {isOpen ? (
                 <Paper className={classes.paper} square>