UNPKG

@material-ui/lab

Version:
425 lines (357 loc) 14.1 kB
"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;