@material-ui/lab
Version:
Laboratory for new Material-UI modules.
425 lines (357 loc) • 14.1 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getClockPickerUtilityClass = getClockPickerUtilityClass;
exports.default = exports.clockPickerClasses = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var React = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _utils = require("@material-ui/utils");
var _styles = require("@material-ui/core/styles");
var _unstyled = require("@material-ui/unstyled");
var _Clock = _interopRequireDefault(require("./Clock"));
var _utils2 = require("../internal/pickers/utils");
var _useUtils = require("../internal/pickers/hooks/useUtils");
var _ClockNumbers = require("./ClockNumbers");
var _PickersArrowSwitcher = _interopRequireDefault(require("../internal/pickers/PickersArrowSwitcher"));
var _timeUtils = require("../internal/pickers/time-utils");
var _dateHelpersHooks = require("../internal/pickers/hooks/date-helpers-hooks");
var _jsxRuntime = require("react/jsx-runtime");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function getClockPickerUtilityClass(slot) {
return (0, _unstyled.generateUtilityClass)('MuiClockPicker', slot);
}
const clockPickerClasses = (0, _unstyled.generateUtilityClasses)('MuiClockPicker', ['arrowSwitcher']);
exports.clockPickerClasses = clockPickerClasses;
const useUtilityClasses = styleProps => {
const {
classes
} = styleProps;
const slots = {
arrowSwitcher: ['arrowSwitcher']
};
return (0, _unstyled.unstable_composeClasses)(slots, getClockPickerUtilityClass, classes);
};
const ClockPickerArrowSwitcher = (0, _styles.styled)(_PickersArrowSwitcher.default, {
name: 'MuiClockPicker',
slot: 'ArrowSwticher',
overridesResolver: (props, styles) => styles.arrowSwitcher
})({
position: 'absolute',
right: 12,
top: 15
});
const defaultGetClockLabelText = (view, time, adapter) => `Select ${view}. ${time === null ? 'No time selected' : `Selected time is ${adapter.format(time, 'fullTime')}`}`;
const defaultGetMinutesClockNumberText = minutes => `${minutes} minutes`;
const defaultGetHoursClockNumberText = hours => `${hours} hours`;
const defaultGetSecondsClockNumberText = seconds => `${seconds} seconds`;
/**
*
* API:
*
* - [ClockPicker API](https://material-ui.com/api/clock-picker/)
*/
function ClockPicker(inProps) {
const props = (0, _styles.useThemeProps)({
props: inProps,
name: 'MuiClockPicker'
});
const {
ampm = false,
ampmInClock = false,
autoFocus,
components,
componentsProps,
date,
disableIgnoringDatePartForTimeValidation = false,
getClockLabelText = defaultGetClockLabelText,
getHoursClockNumberText = defaultGetHoursClockNumberText,
getMinutesClockNumberText = defaultGetMinutesClockNumberText,
getSecondsClockNumberText = defaultGetSecondsClockNumberText,
leftArrowButtonText = 'open previous view',
maxTime,
minTime,
minutesStep = 1,
nextViewAvailable,
onChange,
openNextView,
openPreviousView,
previousViewAvailable,
rightArrowButtonText = 'open next view',
shouldDisableTime,
showViewSwitcher,
view
} = props;
const now = (0, _useUtils.useNow)();
const utils = (0, _useUtils.useUtils)();
const midnight = utils.setSeconds(utils.setMinutes(utils.setHours(now, 0), 0), 0);
const dateOrMidnight = date || midnight;
const {
meridiemMode,
handleMeridiemChange
} = (0, _dateHelpersHooks.useMeridiemMode)(dateOrMidnight, ampm, onChange);
const isTimeDisabled = React.useCallback((rawValue, viewType) => {
if (date === null) {
return false;
}
const validateTimeValue = getRequestedTimePoint => {
const isAfterComparingFn = (0, _timeUtils.createIsAfterIgnoreDatePart)(disableIgnoringDatePartForTimeValidation, utils);
return Boolean(minTime && isAfterComparingFn(minTime, getRequestedTimePoint('end')) || maxTime && isAfterComparingFn(getRequestedTimePoint('start'), maxTime) || shouldDisableTime && shouldDisableTime(rawValue, viewType));
};
switch (viewType) {
case 'hours':
{
const hoursWithMeridiem = (0, _timeUtils.convertValueToMeridiem)(rawValue, meridiemMode, ampm);
return validateTimeValue(when => (0, _utils2.pipe)(currentDate => utils.setHours(currentDate, hoursWithMeridiem), dateWithHours => utils.setMinutes(dateWithHours, when === 'start' ? 0 : 59), dateWithMinutes => utils.setSeconds(dateWithMinutes, when === 'start' ? 0 : 59))(date));
}
case 'minutes':
return validateTimeValue(when => (0, _utils2.pipe)(currentDate => utils.setMinutes(currentDate, rawValue), dateWithMinutes => utils.setSeconds(dateWithMinutes, when === 'start' ? 0 : 59))(date));
case 'seconds':
return validateTimeValue(() => utils.setSeconds(date, rawValue));
default:
throw new Error('not supported');
}
}, [ampm, date, disableIgnoringDatePartForTimeValidation, maxTime, meridiemMode, minTime, shouldDisableTime, utils]);
const selectedId = (0, _utils.unstable_useId)();
const viewProps = React.useMemo(() => {
switch (view) {
case 'hours':
{
const handleHoursChange = (value, isFinish) => {
const valueWithMeridiem = (0, _timeUtils.convertValueToMeridiem)(value, meridiemMode, ampm);
onChange(utils.setHours(dateOrMidnight, valueWithMeridiem), isFinish);
};
return {
onChange: handleHoursChange,
value: utils.getHours(dateOrMidnight),
children: (0, _ClockNumbers.getHourNumbers)({
date,
utils,
ampm,
onChange: handleHoursChange,
getClockNumberText: getHoursClockNumberText,
isDisabled: value => isTimeDisabled(value, 'hours'),
selectedId
})
};
}
case 'minutes':
{
const minutesValue = utils.getMinutes(dateOrMidnight);
const handleMinutesChange = (value, isFinish) => {
onChange(utils.setMinutes(dateOrMidnight, value), isFinish);
};
return {
value: minutesValue,
onChange: handleMinutesChange,
children: (0, _ClockNumbers.getMinutesNumbers)({
utils,
value: minutesValue,
onChange: handleMinutesChange,
getClockNumberText: getMinutesClockNumberText,
isDisabled: value => isTimeDisabled(value, 'minutes'),
selectedId
})
};
}
case 'seconds':
{
const secondsValue = utils.getSeconds(dateOrMidnight);
const handleSecondsChange = (value, isFinish) => {
onChange(utils.setSeconds(dateOrMidnight, value), isFinish);
};
return {
value: secondsValue,
onChange: handleSecondsChange,
children: (0, _ClockNumbers.getMinutesNumbers)({
utils,
value: secondsValue,
onChange: handleSecondsChange,
getClockNumberText: getSecondsClockNumberText,
isDisabled: value => isTimeDisabled(value, 'seconds'),
selectedId
})
};
}
default:
throw new Error('You must provide the type for ClockView');
}
}, [view, utils, date, ampm, getHoursClockNumberText, getMinutesClockNumberText, getSecondsClockNumberText, meridiemMode, onChange, dateOrMidnight, isTimeDisabled, selectedId]);
const styleProps = props;
const classes = useUtilityClasses(styleProps);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
children: [showViewSwitcher && /*#__PURE__*/(0, _jsxRuntime.jsx)(ClockPickerArrowSwitcher, {
className: classes.arrowSwitcher,
leftArrowButtonText: leftArrowButtonText,
rightArrowButtonText: rightArrowButtonText,
components: components,
componentsProps: componentsProps,
onLeftClick: openPreviousView,
onRightClick: openNextView,
isLeftDisabled: previousViewAvailable,
isRightDisabled: nextViewAvailable,
styleProps: styleProps
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Clock.default, (0, _extends2.default)({
autoFocus: autoFocus,
date: date,
ampmInClock: ampmInClock,
type: view,
ampm: ampm,
getClockLabelText: getClockLabelText,
minutesStep: minutesStep,
isTimeDisabled: isTimeDisabled,
meridiemMode: meridiemMode,
handleMeridiemChange: handleMeridiemChange,
selectedId: selectedId
}, viewProps))]
});
}
process.env.NODE_ENV !== "production" ? ClockPicker.propTypes
/* remove-proptypes */
= {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit TypeScript types and run "yarn proptypes" |
// ----------------------------------------------------------------------
/**
* 12h/24h view for hour selection clock.
* @default false
*/
ampm: _propTypes.default.bool,
/**
* Display ampm controls under the clock (instead of in the toolbar).
* @default false
*/
ampmInClock: _propTypes.default.bool,
/**
* Set to `true` if focus should be moved to clock picker.
*/
autoFocus: _propTypes.default.bool,
/**
* Override or extend the styles applied to the component.
*/
classes: _propTypes.default.object,
/**
* The components used for each slot.
* Either a string to use a HTML element or a component.
*/
components: _propTypes.default.shape({
LeftArrowButton: _propTypes.default.elementType,
LeftArrowIcon: _propTypes.default.elementType,
RightArrowButton: _propTypes.default.elementType,
RightArrowIcon: _propTypes.default.elementType
}),
/**
* The props used for each slot inside.
*/
componentsProps: _propTypes.default.object,
/**
* Selected date @DateIOType.
*/
date: _propTypes.default.any,
/**
* Do not ignore date part when validating min/max time.
* @default false
*/
disableIgnoringDatePartForTimeValidation: _propTypes.default.bool,
/**
* Accessible text that helps user to understand which time and view is selected.
* @default <TDate extends any>(
* view: ClockView,
* time: TDate | null,
* adapter: MuiPickersAdapter<TDate>,
* ) =>
* `Select ${view}. ${
* time === null ? 'No time selected' : `Selected time is ${adapter.format(time, 'fullTime')}`
* }`
*/
getClockLabelText: _propTypes.default.func,
/**
* Get clock number aria-text for hours.
* @default (hours: string) => `${hours} hours`
*/
getHoursClockNumberText: _propTypes.default.func,
/**
* Get clock number aria-text for minutes.
* @default (minutes: string) => `${minutes} minutes`
*/
getMinutesClockNumberText: _propTypes.default.func,
/**
* Get clock number aria-text for seconds.
* @default (seconds: string) => `${seconds} seconds`
*/
getSecondsClockNumberText: _propTypes.default.func,
/**
* Left arrow icon aria-label text.
* @default 'open previous view'
*/
leftArrowButtonText: _propTypes.default.string,
/**
* Max time acceptable time.
* For input validation date part of passed object will be ignored if `disableIgnoringDatePartForTimeValidation` not specified.
*/
maxTime: _propTypes.default.any,
/**
* Min time acceptable time.
* For input validation date part of passed object will be ignored if `disableIgnoringDatePartForTimeValidation` not specified.
*/
minTime: _propTypes.default.any,
/**
* Step over minutes.
* @default 1
*/
minutesStep: _propTypes.default.number,
/**
* @ignore
*/
nextViewAvailable: _propTypes.default.bool.isRequired,
/**
* On change callback @DateIOType.
*/
onChange: _propTypes.default.func.isRequired,
/**
* @ignore
*/
openNextView: _propTypes.default.func.isRequired,
/**
* @ignore
*/
openPreviousView: _propTypes.default.func.isRequired,
/**
* @ignore
*/
previousViewAvailable: _propTypes.default.bool.isRequired,
/**
* Right arrow icon aria-label text.
* @default 'open next view'
*/
rightArrowButtonText: _propTypes.default.string,
/**
* Dynamically check if time is disabled or not.
* If returns `false` appropriate time point will ot be acceptable.
*/
shouldDisableTime: _propTypes.default.func,
/**
* @ignore
*/
showViewSwitcher: _propTypes.default.bool,
/**
* @ignore
*/
view: _propTypes.default.oneOf(['hours', 'minutes', 'seconds']).isRequired
} : void 0;
/**
*
* Demos:
*
* - [Time Picker](https://material-ui.com/components/time-picker/)
*
* API:
*
* - [ClockPicker API](https://material-ui.com/api/clock-picker/)
*/
var _default = ClockPicker;
exports.default = _default;