@material-ui/lab
Version:
Material-UI Lab - Incubator for Material-UI React components.
85 lines (84 loc) • 2.61 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import * as React from 'react';
import clsx from 'clsx';
import { useForkRef } from '@material-ui/core/utils';
import { createStyles, withStyles, alpha } from '@material-ui/core/styles';
import { onSpaceOrEnter } from '../internal/pickers/utils';
import { useCanAutoFocus } from '../internal/pickers/hooks/useCanAutoFocus';
import { WrapperVariantContext } from '../internal/pickers/wrappers/WrapperVariantContext';
export const styles = theme => createStyles({
root: {
flexBasis: '33.3%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
},
modeDesktop: {
flexBasis: '25%'
},
yearButton: _extends({
color: 'unset',
backgroundColor: 'transparent',
border: 'none',
outline: 0
}, theme.typography.subtitle1, {
margin: '8px 0',
height: 36,
width: 72,
borderRadius: 16,
cursor: 'pointer',
'&:focus, &:hover': {
backgroundColor: alpha(theme.palette.action.active, theme.palette.action.hoverOpacity)
},
'&$disabled': {
color: theme.palette.text.secondary
},
'&$selected': {
color: theme.palette.primary.contrastText,
backgroundColor: theme.palette.primary.main,
'&:focus, &:hover': {
backgroundColor: theme.palette.primary.dark
}
}
}),
disabled: {},
selected: {}
});
/**
* @ignore - internal component.
*/
const PickersYear = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
const {
allowKeyboardControl,
classes,
children,
disabled,
focused,
onSelect,
selected,
value
} = props;
const ref = React.useRef(null);
const refHandle = useForkRef(ref, forwardedRef);
const canAutoFocus = useCanAutoFocus();
const wrapperVariant = React.useContext(WrapperVariantContext);
React.useEffect(() => {
if (canAutoFocus && focused && ref.current && !disabled && allowKeyboardControl) {
ref.current.focus();
}
}, [allowKeyboardControl, canAutoFocus, disabled, focused]);
return /*#__PURE__*/React.createElement("div", {
className: clsx(classes.root, wrapperVariant === 'desktop' && classes.modeDesktop)
}, /*#__PURE__*/React.createElement("button", {
ref: refHandle,
disabled: disabled,
type: "button",
tabIndex: selected ? 0 : -1,
onClick: () => onSelect(value),
onKeyDown: onSpaceOrEnter(() => onSelect(value)),
className: clsx(classes.yearButton, disabled && classes.disabled, selected && classes.selected)
}, children));
});
export default withStyles(styles, {
name: 'MuiPickersYear'
})(PickersYear);