@material-ui/lab
Version:
Material-UI Lab - Incubator for Material-UI React components.
310 lines (258 loc) • 9.31 kB
JavaScript
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.areDayPropsEqual = exports.styles = void 0;
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var React = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _clsx = _interopRequireDefault(require("clsx"));
var _ButtonBase = _interopRequireDefault(require("@material-ui/core/ButtonBase"));
var _styles = require("@material-ui/core/styles");
var _core = require("@material-ui/core");
var _utils = require("../internal/pickers/utils");
var _useUtils = require("../internal/pickers/hooks/useUtils");
var _dimensions = require("../internal/pickers/constants/dimensions");
var _useCanAutoFocus = require("../internal/pickers/hooks/useCanAutoFocus");
const styles = theme => (0, _styles.createStyles)({
root: (0, _extends2.default)({}, theme.typography.caption, {
width: _dimensions.DAY_SIZE,
height: _dimensions.DAY_SIZE,
borderRadius: '50%',
padding: 0,
// background required here to prevent collides with the other days when animating with transition group
backgroundColor: theme.palette.background.paper,
color: theme.palette.text.primary,
'&:hover': {
backgroundColor: (0, _styles.alpha)(theme.palette.action.active, theme.palette.action.hoverOpacity)
},
'&:focus': {
backgroundColor: (0, _styles.alpha)(theme.palette.action.active, theme.palette.action.hoverOpacity),
'&$selected': {
willChange: 'background-color',
backgroundColor: theme.palette.primary.dark
}
},
'&$selected': {
color: theme.palette.primary.contrastText,
backgroundColor: theme.palette.primary.main,
fontWeight: theme.typography.fontWeightMedium,
transition: theme.transitions.create('background-color', {
duration: theme.transitions.duration.short
}),
'&:hover': {
willChange: 'background-color',
backgroundColor: theme.palette.primary.dark
}
},
'&$disabled': {
color: theme.palette.text.secondary
}
}),
dayWithMargin: {
margin: `0 ${_dimensions.DAY_MARGIN}px`
},
dayOutsideMonth: {
color: theme.palette.text.secondary
},
hiddenDaySpacingFiller: {
visibility: 'hidden'
},
today: {
'&:not($selected)': {
border: `1px solid ${theme.palette.text.secondary}`
}
},
dayLabel: {// need for overrides
},
selected: {},
disabled: {}
});
exports.styles = styles;
/**
* @ignore - do not document.
*/
const PickersDay = /*#__PURE__*/React.forwardRef(function PickersDay(props, forwardedRef) {
const {
allowKeyboardControl,
allowSameDateSelection = false,
classes,
className,
day,
disabled = false,
disableHighlightToday = false,
disableMargin = false,
focusable = false,
focused = false,
isAnimating,
onClick,
onDayFocus,
onDaySelect,
onFocus,
onKeyDown,
outsideCurrentMonth,
selected = false,
showDaysOutsideCurrentMonth = false,
today: isToday = false
} = props,
other = (0, _objectWithoutPropertiesLoose2.default)(props, ["allowKeyboardControl", "allowSameDateSelection", "classes", "className", "day", "disabled", "disableHighlightToday", "disableMargin", "focusable", "focused", "hidden", "isAnimating", "onClick", "onDayFocus", "onDaySelect", "onFocus", "onKeyDown", "outsideCurrentMonth", "selected", "showDaysOutsideCurrentMonth", "today"]);
const utils = (0, _useUtils.useUtils)();
const canAutoFocus = (0, _useCanAutoFocus.useCanAutoFocus)();
const ref = React.useRef(null);
const handleRef = (0, _core.useForkRef)(ref, forwardedRef);
React.useEffect(() => {
if (focused && !disabled && !isAnimating && !outsideCurrentMonth && ref.current && allowKeyboardControl && canAutoFocus) {
ref.current.focus();
}
}, [allowKeyboardControl, canAutoFocus, disabled, focused, isAnimating, outsideCurrentMonth]);
const handleFocus = event => {
if (!focused && onDayFocus) {
onDayFocus(day);
}
if (onFocus) {
onFocus(event);
}
};
const handleClick = event => {
if (!allowSameDateSelection && selected) return;
if (!disabled) {
onDaySelect(day, 'finish');
}
if (onClick) {
onClick(event);
}
};
const handleKeyDown = (0, _utils.onSpaceOrEnter)(() => {
if (!disabled) {
onDaySelect(day, 'finish');
}
}, onKeyDown);
const dayClassName = (0, _clsx.default)(classes.root, className, selected && classes.selected, !disableMargin && classes.dayWithMargin, !disableHighlightToday && isToday && classes.today, outsideCurrentMonth && showDaysOutsideCurrentMonth && classes.dayOutsideMonth);
if (outsideCurrentMonth && !showDaysOutsideCurrentMonth) {
return /*#__PURE__*/React.createElement("div", {
"aria-hidden": true,
className: (0, _clsx.default)(dayClassName, classes.hiddenDaySpacingFiller)
});
}
return /*#__PURE__*/React.createElement(_ButtonBase.default, (0, _extends2.default)({
ref: handleRef,
centerRipple: true,
disabled: disabled,
"aria-label": utils.format(day, 'fullDate'),
tabIndex: focused || focusable ? 0 : -1,
className: dayClassName,
onFocus: handleFocus,
onKeyDown: handleKeyDown,
onClick: handleClick
}, other), /*#__PURE__*/React.createElement("span", {
className: classes.dayLabel
}, utils.format(day, 'dayOfMonth')));
});
const areDayPropsEqual = (prevProps, nextProps) => {
return prevProps.focused === nextProps.focused && prevProps.focusable === nextProps.focusable && prevProps.isAnimating === nextProps.isAnimating && prevProps.today === nextProps.today && prevProps.disabled === nextProps.disabled && prevProps.selected === nextProps.selected && prevProps.allowKeyboardControl === nextProps.allowKeyboardControl && prevProps.disableMargin === nextProps.disableMargin && prevProps.showDaysOutsideCurrentMonth === nextProps.showDaysOutsideCurrentMonth && prevProps.disableHighlightToday === nextProps.disableHighlightToday && prevProps.className === nextProps.className && prevProps.outsideCurrentMonth === nextProps.outsideCurrentMonth && prevProps.onDayFocus === nextProps.onDayFocus && prevProps.onDaySelect === nextProps.onDaySelect;
};
exports.areDayPropsEqual = areDayPropsEqual;
PickersDay.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit TypeScript types and run "yarn proptypes" |
// ----------------------------------------------------------------------
/**
* If `true`, keyboard control and focus management is enabled.
*/
allowKeyboardControl: _propTypes.default.bool,
/**
* If `true`, `onChange` is fired on click even if the same date is selected.
* @default false
*/
allowSameDateSelection: _propTypes.default.bool,
/**
* The content of the component.
*/
children: _propTypes.default.node,
/**
* @ignore
*/
classes: _propTypes.default.object.isRequired,
/**
* @ignore
*/
className: _propTypes.default.string,
/**
* The date to show.
*/
day: _propTypes.default.any.isRequired,
/**
* If `true`, renders as disabled.
*/
disabled: _propTypes.default.bool,
/**
* If `true`, todays date is rendering without highlighting with circle.
* @default false
*/
disableHighlightToday: _propTypes.default.bool,
/**
* If `true`, days are rendering without margin. Useful for displaying linked range of days.
*/
disableMargin: _propTypes.default.bool,
/**
* If `true`, allows to focus by tabbing.
*/
focusable: _propTypes.default.bool,
/**
* If `true`, the day element will be focused during the first mount.
*/
focused: _propTypes.default.bool,
/**
* @ignore
*/
hidden: _propTypes.default.bool,
/**
* @ignore
*/
isAnimating: _propTypes.default.bool,
/**
* @ignore
*/
onClick: _propTypes.default.func,
/**
* @ignore
*/
onDayFocus: _propTypes.default.func,
/**
* @ignore
*/
onDaySelect: _propTypes.default.func.isRequired,
/**
* @ignore
*/
onFocus: _propTypes.default.func,
/**
* @ignore
*/
onKeyDown: _propTypes.default.func,
/**
* If `true`, day is outside of month and will be hidden.
*/
outsideCurrentMonth: _propTypes.default.bool.isRequired,
/**
* If `true`, renders as selected.
*/
selected: _propTypes.default.bool,
/**
* If `true`, days that have `outsideCurrentMonth={true}` are displayed.
* @default false
*/
showDaysOutsideCurrentMonth: _propTypes.default.bool,
/**
* If `true`, renders as today date.
*/
today: _propTypes.default.bool
};
var _default = (0, _styles.withStyles)(styles, {
name: 'MuiPickersDay'
})( /*#__PURE__*/React.memo(PickersDay, areDayPropsEqual));
exports.default = _default;