Page Menu
Home
c4science
Search
Configure Global Search
Log In
Files
F112969823
ListItemButton.js
No One
Temporary
Actions
Download File
Edit File
Delete File
View Transforms
Subscribe
Mute Notifications
Award Token
Subscribers
None
File Metadata
Details
File Info
Storage
Attached
Created
Wed, May 14, 04:15
Size
8 KB
Mime Type
text/x-java
Expires
Fri, May 16, 04:15 (1 d, 6 h)
Engine
blob
Format
Raw Data
Handle
26155723
Attached To
rOACCT Open Access Compliance Check Tool (OACCT)
ListItemButton.js
View Options
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import _extends from "@babel/runtime/helpers/esm/extends";
const _excluded = ["alignItems", "autoFocus", "component", "children", "dense", "disableGutters", "divider", "focusVisibleClassName", "selected", "className"];
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { unstable_composeClasses as composeClasses } from '@mui/base';
import { alpha } from '@mui/system';
import styled, { rootShouldForwardProp } from '../styles/styled';
import useThemeProps from '../styles/useThemeProps';
import ButtonBase from '../ButtonBase';
import useEnhancedEffect from '../utils/useEnhancedEffect';
import useForkRef from '../utils/useForkRef';
import ListContext from '../List/ListContext';
import listItemButtonClasses, { getListItemButtonUtilityClass } from './listItemButtonClasses';
import { jsx as _jsx } from "react/jsx-runtime";
export const overridesResolver = (props, styles) => {
const {
ownerState
} = props;
return [styles.root, ownerState.dense && styles.dense, ownerState.alignItems === 'flex-start' && styles.alignItemsFlexStart, ownerState.divider && styles.divider, !ownerState.disableGutters && styles.gutters];
};
const useUtilityClasses = ownerState => {
const {
alignItems,
classes,
dense,
disabled,
disableGutters,
divider,
selected
} = ownerState;
const slots = {
root: ['root', dense && 'dense', !disableGutters && 'gutters', divider && 'divider', disabled && 'disabled', alignItems === 'flex-start' && 'alignItemsFlexStart', selected && 'selected']
};
const composedClasses = composeClasses(slots, getListItemButtonUtilityClass, classes);
return _extends({}, classes, composedClasses);
};
const ListItemButtonRoot = styled(ButtonBase, {
shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
name: 'MuiListItemButton',
slot: 'Root',
overridesResolver
})(({
theme,
ownerState
}) => _extends({
display: 'flex',
flexGrow: 1,
justifyContent: 'flex-start',
alignItems: 'center',
position: 'relative',
textDecoration: 'none',
minWidth: 0,
boxSizing: 'border-box',
textAlign: 'left',
paddingTop: 8,
paddingBottom: 8,
transition: theme.transitions.create('background-color', {
duration: theme.transitions.duration.shortest
}),
'&:hover': {
textDecoration: 'none',
backgroundColor: (theme.vars || theme).palette.action.hover,
// Reset on touch devices, it doesn't add specificity
'@media (hover: none)': {
backgroundColor: 'transparent'
}
},
[`&.${listItemButtonClasses.selected}`]: {
backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
[`&.${listItemButtonClasses.focusVisible}`]: {
backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
}
},
[`&.${listItemButtonClasses.selected}:hover`]: {
backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : alpha(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.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
}
},
[`&.${listItemButtonClasses.focusVisible}`]: {
backgroundColor: (theme.vars || theme).palette.action.focus
},
[`&.${listItemButtonClasses.disabled}`]: {
opacity: (theme.vars || theme).palette.action.disabledOpacity
}
}, ownerState.divider && {
borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`,
backgroundClip: 'padding-box'
}, ownerState.alignItems === 'flex-start' && {
alignItems: 'flex-start'
}, !ownerState.disableGutters && {
paddingLeft: 16,
paddingRight: 16
}, ownerState.dense && {
paddingTop: 4,
paddingBottom: 4
}));
const ListItemButton = /*#__PURE__*/React.forwardRef(function ListItemButton(inProps, ref) {
const props = useThemeProps({
props: inProps,
name: 'MuiListItemButton'
});
const {
alignItems = 'center',
autoFocus = false,
component = 'div',
children,
dense = false,
disableGutters = false,
divider = false,
focusVisibleClassName,
selected = false,
className
} = props,
other = _objectWithoutPropertiesLoose(props, _excluded);
const context = React.useContext(ListContext);
const childContext = React.useMemo(() => ({
dense: dense || context.dense || false,
alignItems,
disableGutters
}), [alignItems, context.dense, dense, disableGutters]);
const listItemRef = React.useRef(null);
useEnhancedEffect(() => {
if (autoFocus) {
if (listItemRef.current) {
listItemRef.current.focus();
} else if (process.env.NODE_ENV !== 'production') {
console.error('MUI: Unable to set focus to a ListItemButton whose component has not been rendered.');
}
}
}, [autoFocus]);
const ownerState = _extends({}, props, {
alignItems,
dense: childContext.dense,
disableGutters,
divider,
selected
});
const classes = useUtilityClasses(ownerState);
const handleRef = useForkRef(listItemRef, ref);
return /*#__PURE__*/_jsx(ListContext.Provider, {
value: childContext,
children: /*#__PURE__*/_jsx(ListItemButtonRoot, _extends({
ref: handleRef,
href: other.href || other.to,
component: (other.href || other.to) && component === 'div' ? 'a' : component,
focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
ownerState: ownerState,
className: clsx(classes.root, className)
}, other, {
classes: classes,
children: children
}))
});
});
process.env.NODE_ENV !== "production" ? ListItemButton.propTypes /* remove-proptypes */ = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the d.ts file and run "yarn proptypes" |
// ----------------------------------------------------------------------
/**
* Defines the `align-items` style property.
* @default 'center'
*/
alignItems: PropTypes.oneOf(['center', 'flex-start']),
/**
* If `true`, the list item is focused during the first mount.
* Focus will also be triggered if the value changes from false to true.
* @default false
*/
autoFocus: PropTypes.bool,
/**
* The content of the component if a `ListItemSecondaryAction` is used it must
* be the last child.
*/
children: PropTypes.node,
/**
* Override or extend the styles applied to the component.
*/
classes: PropTypes.object,
/**
* @ignore
*/
className: PropTypes.string,
/**
* The component used for the root node.
* Either a string to use a HTML element or a component.
*/
component: PropTypes.elementType,
/**
* If `true`, compact vertical padding designed for keyboard and mouse input is used.
* The prop defaults to the value inherited from the parent List component.
* @default false
*/
dense: PropTypes.bool,
/**
* If `true`, the component is disabled.
* @default false
*/
disabled: PropTypes.bool,
/**
* If `true`, the left and right padding is removed.
* @default false
*/
disableGutters: PropTypes.bool,
/**
* If `true`, a 1px light border is added to the bottom of the list item.
* @default false
*/
divider: PropTypes.bool,
/**
* This prop can help identify which element has keyboard focus.
* The class name will be applied when the element gains the focus through keyboard interaction.
* It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
* The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).
* A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
* if needed.
*/
focusVisibleClassName: PropTypes.string,
/**
* @ignore
*/
href: PropTypes.string,
/**
* Use to apply selected styling.
* @default false
*/
selected: PropTypes.bool,
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
} : void 0;
export default ListItemButton;
Event Timeline
Log In to Comment