added new component prop called ListOptionComponent for rendering con…

…trol
mui · Jan 14, 2020 · 26c4953 · 26c4953
1 parent c5e1ae6
commit 26c4953
Show file tree

Hide file tree

Showing 6 changed files with 89 additions and 0 deletions.
diff --git a/docs/pages/api/autocomplete.md b/docs/pages/api/autocomplete.md
@@ -55,6 +55,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | <span class="prop-name">inputValue</span> | <span class="prop-type">string</span> |  | The input value. |
 | <span class="prop-name">ListboxComponent</span> | <span class="prop-type">elementType</span> | <span class="prop-default">'ul'</span> | The component used to render the listbox. |
 | <span class="prop-name">ListboxProps</span> | <span class="prop-type">object</span> |  | Props applied to the Listbox element. |
+| <span class="prop-name">ListOptionComponent</span> | <span class="prop-type">elementType</span> | <span class="prop-default">'li'</span> | The component used to render the list item option.<br>This will override `renderOption` as well as `getOptionLabel`. It allows greater control of the option rendering. |
 | <span class="prop-name">loading</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the component is in a loading state. |
 | <span class="prop-name">loadingText</span> | <span class="prop-type">node</span> | <span class="prop-default">'Loading…'</span> | Text to display when in a loading state.<br>For localization purposes, you can use the provided [translations](/guides/localization/). |
 | <span class="prop-name">multiple</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, `value` must be an array and the menu will support multiple selections. |

diff --git a/docs/src/pages/components/autocomplete/Playground.js b/docs/src/pages/components/autocomplete/Playground.js
@@ -1,7 +1,10 @@
 /* eslint-disable no-use-before-define */
 import React from 'react';
 import TextField from '@material-ui/core/TextField';
+import Tooltip from '@material-ui/core/Tooltip';
 import Autocomplete from '@material-ui/lab/Autocomplete';
+import Info from '@material-ui/icons/Info';
+import {default as Button} from '@material-ui/core/Button';
 
 export default function Playground() {
   const defaultProps = {
@@ -126,6 +129,36 @@ export default function Playground() {
           <TextField {...params} label="disablePortal" margin="normal" fullWidth />
         )}
       />
+      <Autocomplete
+        {...defaultProps}
+        id="list-option"
+        debug
+        getOptionDisabled={({ year }) => year > 2000}
+        ListOptionComponent={({ title, year, ...props }) => {
+          if (year > 2000) {
+            return (
+              <Tooltip title={`Too Old ${year}`} placement="right-end">
+                <div>
+                  <Button endIcon={<Info />} component="li" {...props} fullWidth>
+                    {title} - {year}
+                  </Button>
+                </div>
+              </Tooltip>
+            );
+          }
+
+          return (
+            <Button component="li" {...props} fullWidth>
+              <span>
+                {title} - {year}
+              </span>
+            </Button>
+          );
+        }}
+        renderInput={params => (
+          <TextField {...params} label="DisableOld w/ tooltip" margin="normal" fullWidth />
+        )}
+      />
     </div>
   );
 }

diff --git a/docs/src/pages/components/autocomplete/Playground.tsx b/docs/src/pages/components/autocomplete/Playground.tsx
@@ -1,7 +1,10 @@
 /* eslint-disable no-use-before-define */
 import React from 'react';
 import TextField from '@material-ui/core/TextField';
+import Tooltip from '@material-ui/core/Tooltip';
 import Autocomplete from '@material-ui/lab/Autocomplete';
+import Info from '@material-ui/icons/Info';
+import { ButtonProps, default as Button } from '@material-ui/core/Button';
 
 export default function Playground() {
   const defaultProps = {
@@ -124,6 +127,40 @@ export default function Playground() {
           <TextField {...params} label="disablePortal" margin="normal" fullWidth />
         )}
       />
+      <Autocomplete
+        {...defaultProps}
+        id="list-option"
+        debug
+        getOptionDisabled={({ year }) => year > 2000}
+        ListOptionComponent={<T extends FilmOptionType>({
+          title,
+          year,
+          ...props
+        }: T & Partial<ButtonProps>) => {
+          if (year > 2000) {
+            return (
+              <Tooltip title={`Too Old ${year}`} placement="right-end">
+                <div>
+                  <Button endIcon={<Info />} component="li" {...props} fullWidth>
+                    {title} - {year}
+                  </Button>
+                </div>
+              </Tooltip>
+            );
+          }
+
+          return (
+            <Button component="li" {...props} fullWidth>
+              <span>
+                {title} - {year}
+              </span>
+            </Button>
+          );
+        }}
+        renderInput={params => (
+          <TextField {...params} label="DisableOld w/ tooltip" margin="normal" fullWidth />
+        )}
+      />
     </div>
   );
 }

diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts b/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts
@@ -82,6 +82,12 @@ export interface AutocompleteProps<T>
    * Props applied to the Listbox element.
    */
   ListboxProps?: object;
+  /**
+   * The component used to render the list item option.
+   *
+   * This will override `renderOption` as well as `getOptionLabel`. It allows greater control of the option rendering.
+   */
+  ListOptionComponent?: React.ComponentType<React.HTMLAttributes<HTMLElement> & T>;
   /**
    * If `true`, the component is in a loading state.
    */

diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
@@ -248,6 +248,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
     inputValue: inputValueProp,
     ListboxComponent = 'ul',
     ListboxProps,
+    ListOptionComponent = 'li',
     loading = false,
     loadingText = 'Loading…',
     multiple = false,
@@ -335,6 +336,10 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
   const renderListOption = (option, index) => {
     const optionProps = getOptionProps({ option, index });
 
+    if (ListOptionComponent !== 'li') {
+      return <ListOptionComponent {...option} {...optionProps} className={classes.option} />;
+    }
+
     return (
       <li {...optionProps} className={classes.option}>
         {renderOption(option, {
@@ -613,6 +618,12 @@ Autocomplete.propTypes = {
    * Props applied to the Listbox element.
    */
   ListboxProps: PropTypes.object,
+  /**
+   * The component used to render the list item option.
+   *
+   * This will override `renderOption` as well as `getOptionLabel`. It allows greater control of the option rendering.
+   */
+  ListOptionComponent: PropTypes.elementType,
   /**
    * If `true`, the component is in a loading state.
    */

diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
@@ -858,6 +858,7 @@ export default function useAutocomplete(props) {
       return {
         key: index,
         tabIndex: -1,
+        disabled,
         role: 'option',
         id: `${id}-option-${index}`,
         onMouseOver: handleOptionMouseOver,