Skip to content

Commit

Permalink
material design state
Browse files Browse the repository at this point in the history
  • Loading branch information
@oliviertassinari
oliviertassinari committed Oct 30, 2020
1 parent a8671b4 commit 0341e39
Show file tree
Hide file tree
Showing 6 changed files with 98 additions and 157 deletions.
6 changes: 1 addition & 5 deletions docs/pages/api-docs/autocomplete.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,6 @@ The `MuiAutocomplete` name can be used for providing [default props](/customizat
| <span class="prop-name">PaperComponent</span> | <span class="prop-type">elementType</span> | <span class="prop-default">Paper</span> | The component used to render the body of the popup. |
| <span class="prop-name">PopperComponent</span> | <span class="prop-type">elementType</span> | <span class="prop-default">Popper</span> | The component used to position the popup. |
| <span class="prop-name">popupIcon</span> | <span class="prop-type">node</span> | <span class="prop-default">&lt;ArrowDropDownIcon /></span> | The icon to display in place of the default popup icon. |
| <span class="prop-name">readOnly</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the input is and search functionality disabled, but s still consistently styled. |
| <span class="prop-name">renderGroup</span> | <span class="prop-type">func</span> | | Render the group.<br><br>**Signature:**<br>`function(option: any) => ReactNode`<br>*option:* The group to render. |
| <span class="prop-name required">renderInput<abbr title="required">*</abbr></span> | <span class="prop-type">func</span> | | Render the input.<br><br>**Signature:**<br>`function(params: object) => ReactNode`<br> |
| <span class="prop-name">renderOption</span> | <span class="prop-type">func</span> | | Render the option, use `getOptionLabel` by default.<br><br>**Signature:**<br>`function(props: object, option: T, state: object) => ReactNode`<br>*props:* The props to apply on the li element.<br>*option:* The option to render.<br>*state:* The state of the component. |
Expand All @@ -99,17 +98,14 @@ Any other props supplied will be provided to the root element (native element).
|:-----|:-------------|:------------|
| <span class="prop-name">root</span> | <span class="prop-name">.MuiAutocomplete-root</span> | Styles applied to the root element.
| <span class="prop-name">fullWidth</span> | <span class="prop-name">.MuiAutocomplete-fullWidth</span> | Styles applied to the root element if `fullWidth={true}`.
| <span class="prop-name">focused</span> | <span class="prop-name">.Mui-focused</span> | Pseudo-class applied to the root element or option component `focused` class if keyboard or mouse focused.
| <span class="prop-name">disabled</span> | <span class="prop-name">.Mui-disabled</span> | Pseudo-class applied to the option component `disabled` class if option is disabled.
| <span class="prop-name">selected</span> | <span class="prop-name">.Mui-selected</span> | Pseudo-class applied to the option component `selected` class if option is selected.
| <span class="prop-name">focused</span> | <span class="prop-name">.Mui-focused</span> | Pseudo-class applied to the root element if focused.
| <span class="prop-name">tag</span> | <span class="prop-name">.MuiAutocomplete-tag</span> | Styles applied to the tag elements, e.g. the chips.
| <span class="prop-name">tagSizeSmall</span> | <span class="prop-name">.MuiAutocomplete-tagSizeSmall</span> | Styles applied to the tag elements, e.g. the chips if `size="small"`.
| <span class="prop-name">hasPopupIcon</span> | <span class="prop-name">.MuiAutocomplete-hasPopupIcon</span> | Styles applied when the popup icon is rendered.
| <span class="prop-name">hasClearIcon</span> | <span class="prop-name">.MuiAutocomplete-hasClearIcon</span> | Styles applied when the clear icon is rendered.
| <span class="prop-name">inputRoot</span> | <span class="prop-name">.MuiAutocomplete-inputRoot</span> | Styles applied to the Input element.
| <span class="prop-name">input</span> | <span class="prop-name">.MuiAutocomplete-input</span> | Styles applied to the input element.
| <span class="prop-name">inputFocused</span> | <span class="prop-name">.MuiAutocomplete-inputFocused</span> | Styles applied to the input element if tag focused.
| <span class="prop-name">inputDisabled</span> | <span class="prop-name">.MuiAutocomplete-inputDisabled</span> | Styles applied to the input element readOnly={true}
| <span class="prop-name">endAdornment</span> | <span class="prop-name">.MuiAutocomplete-endAdornment</span> | Styles applied to the endAdornment element.
| <span class="prop-name">clearIndicator</span> | <span class="prop-name">.MuiAutocomplete-clearIndicator</span> | Styles applied to the clear indicator.
| <span class="prop-name">popupIndicator</span> | <span class="prop-name">.MuiAutocomplete-popupIndicator</span> | Styles applied to the popup indicator.
Expand Down
13 changes: 1 addition & 12 deletions packages/material-ui/src/Autocomplete/Autocomplete.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,12 +67,8 @@ export interface AutocompleteProps<
root?: string;
/** Styles applied to the root element if `fullWidth={true}`. */
fullWidth?: string;
/** Pseudo-class applied to the root element or option component `focused` class if keyboard or mouse focused. */
/** Pseudo-class applied to the root element if focused. */
focused?: string;
/** Pseudo-class applied to the option component `disabled` class if option is disabled. */
disabled?: string;
/** Pseudo-class applied to the option component `selected` class if option is selected. */
selected?: string;
/** Styles applied to the tag elements, e.g. the chips. */
tag?: string;
/** Styles applied to the tag elements, e.g. the chips if `size="small"`. */
Expand All @@ -87,8 +83,6 @@ export interface AutocompleteProps<
input?: string;
/** Styles applied to the input element if tag focused. */
inputFocused?: string;
/** Styles applied to the input element readOnly={true} */
inputDisabled?: string;
/** Styles applied to the endAdornment element. */
endAdornment?: string;
/** Styles applied to the clear indicator. */
Expand Down Expand Up @@ -145,11 +139,6 @@ export interface AutocompleteProps<
* @default false
*/
disablePortal?: boolean;
/**
* If `true`, the input is and search functionality disabled, but s still consistently styled.
* @default false
*/
readOnly?: boolean;
/**
* Force the visibility display of the popup icon.
* @default 'auto'
Expand Down
116 changes: 46 additions & 70 deletions packages/material-ui/src/Autocomplete/Autocomplete.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,12 +31,8 @@ export const styles = (theme) => ({
fullWidth: {
width: '100%',
},
/* Pseudo-class applied to the root element or option component `focused` class if keyboard or mouse focused. */
/* Pseudo-class applied to the root element if focused. */
focused: {},
/* Pseudo-class applied to the option component `disabled` class if option is disabled. */
disabled: {},
/* Pseudo-class applied to the option component `selected` class if option is selected. */
selected: {},
/* Styles applied to the tag elements, e.g. the chips. */
tag: {
margin: 3,
Expand Down Expand Up @@ -127,9 +123,6 @@ export const styles = (theme) => ({
padding: '2.5px 4px',
},
},
'&$inputDisabled': {
cursor: 'pointer',
},
},
/* Styles applied to the input element. */
input: {
Expand All @@ -141,12 +134,6 @@ export const styles = (theme) => ({
inputFocused: {
opacity: 1,
},
/* Styles applied to the input element readOnly={true} */
inputDisabled: {
cursor: 'pointer !important',
color: 'transparent', // Hide the blinking cursor
textShadow: `0 0 0 ${theme.palette.text.primary}`,
},
/* Styles applied to the endAdornment element. */
endAdornment: {
// We use a position absolute to support wrapping tags.
Expand Down Expand Up @@ -219,21 +206,38 @@ export const styles = (theme) => ({
[theme.breakpoints.up('sm')]: {
minHeight: 'auto',
},
'&$focused': {
'&[data-focus="true"]': {
backgroundColor: theme.palette.action.hover,
// Reset on touch devices, it doesn't add specificity
'@media (hover: none)': {
backgroundColor: 'transparent',
},
},
'&[aria-disabled="true"]': {
opacity: theme.palette.action.disabledOpacity,
pointerEvents: 'none',
},
'&$selected': {
backgroundColor: theme.palette.action.selected,
'&$focused': {
'&.Mui-focusVisible': {
backgroundColor: theme.palette.action.focus,
},
'&[aria-selected="true"]': {
backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
'&[data-focus="true"]': {
backgroundColor: alpha(
theme.palette.action.selected,
theme.palette.primary.main,
theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity,
),
// Reset on touch devices, it doesn't add specificity
'@media (hover: none)': {
backgroundColor: theme.palette.action.selected,
},
},
'&.Mui-focusVisible': {
backgroundColor: alpha(
theme.palette.primary.main,
theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity,
),
},
},
'&$disabled': {
opacity: theme.palette.action.disabledOpacity,
pointerEvents: 'none',
},
},
/* Styles applied to the group's label elements. */
Expand Down Expand Up @@ -274,7 +278,6 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
debug = false,
defaultValue = props.multiple ? [] : null,
disableClearable = false,
readOnly = false,
disableCloseOnSelect = false,
disabled = false,
disabledItemsFocusable = false,
Expand Down Expand Up @@ -345,7 +348,6 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
setAnchorEl,
inputValue,
groupedOptions,
highlightedOptionIndex,
} = useAutocomplete({ ...props, componentName: 'Autocomplete' });

let startAdornment;
Expand Down Expand Up @@ -396,45 +398,16 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {

const renderGroup = renderGroupProp || defaultRenderGroup;
const defaultRenderOption = (props2, option) => <li {...props2}>{getOptionLabel(option)}</li>;

const renderOption = renderOptionProp || defaultRenderOption;

const renderListOption = React.useCallback(
(option, index) => {
const optionProps = getOptionProps({ option, index });
return renderOption(
{
...optionProps,
className: clsx(classes.option, {
[classes.focused]: highlightedOptionIndex === optionProps.index,
[classes.selected]: optionProps['aria-selected'],
[classes.disabled]: optionProps['aria-disabled'],
}),
},
option,
{
selected: optionProps['aria-selected'],
inputValue,
},
);
},
[getOptionProps, highlightedOptionIndex, inputValue, classes, renderOption],
);
const renderListOption = (option, index) => {
const optionProps = getOptionProps({ option, index });

const allGroupedOptions = React.useMemo(() => {
return groupedOptions.map((option, index) => {
if (groupBy) {
return renderGroup({
key: option.key,
group: option.group,
children: option.options.map((option2, index2) =>
renderListOption(option2, option.index + index2),
),
});
}
return renderListOption(option, index);
return renderOption({ ...optionProps, className: classes.option }, option, {
selected: optionProps['aria-selected'],
inputValue,
});
}, [groupedOptions, groupBy, renderGroup, renderListOption]);
};

const hasClearIcon = !disableClearable && !disabled && dirty;
const hasPopupIcon = (!freeSolo || forcePopupIcon === true) && forcePopupIcon !== false;
Expand Down Expand Up @@ -463,9 +436,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
InputLabelProps: getInputLabelProps(),
InputProps: {
ref: setAnchorEl,
className: clsx(classes.inputRoot, {
[classes.inputDisabled]: readOnly,
}),
className: classes.inputRoot,
startAdornment,
endAdornment: (
<div className={classes.endAdornment}>
Expand Down Expand Up @@ -499,7 +470,6 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
inputProps: {
className: clsx(classes.input, {
[classes.inputFocused]: focusedTag === -1,
[classes.inputDisabled]: readOnly,
}),
disabled,
...getInputProps(),
Expand Down Expand Up @@ -531,7 +501,18 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
{...getListboxProps()}
{...ListboxProps}
>
{allGroupedOptions}
{groupedOptions.map((option, index) => {
if (groupBy) {
return renderGroup({
key: option.key,
group: option.group,
children: option.options.map((option2, index2) =>
renderListOption(option2, option.index + index2),
),
});
}
return renderListOption(option, index);
})}
</ListboxComponent>
) : null}
</PaperComponent>
Expand Down Expand Up @@ -863,11 +844,6 @@ Autocomplete.propTypes = {
* @default <ArrowDropDownIcon />
*/
popupIcon: PropTypes.node,
/**
* If `true`, the input is and search functionality disabled, but s still consistently styled.
* @default false
*/
readOnly: PropTypes.bool,
/**
* Render the group.
*
Expand Down
Loading

0 comments on commit 0341e39

Please sign in to comment.