material-ui-pickers-v4
Version:
React components, that implements material design pickers for material-ui v4 with updated material ui
277 lines (262 loc) • 7.74 kB
JavaScript
import { useMemo, createElement, memo } from 'react';
import { object, func, bool, number, oneOf } from 'prop-types';
import { u as useUtils } from './useUtils-4c10af65.js';
import clsx from 'clsx';
import _extends from '@babel/runtime/helpers/esm/extends';
import { makeStyles, Typography } from '@material-ui/core';
import '@babel/runtime/helpers/esm/classCallCheck';
import '@babel/runtime/helpers/esm/createClass';
import '@babel/runtime/helpers/esm/inherits';
import '@babel/runtime/helpers/esm/possibleConstructorReturn';
import '@babel/runtime/helpers/esm/getPrototypeOf';
import { b as ClockType, g as getMeridiem, c as convertToMeridiem, a as Clock } from './Clock-f69d5d8d.js';
var positions = {
0: [0, 40],
1: [55, 19.6],
2: [94.4, 59.5],
3: [109, 114],
4: [94.4, 168.5],
5: [54.5, 208.4],
6: [0, 223],
7: [-54.5, 208.4],
8: [-94.4, 168.5],
9: [-109, 114],
10: [-94.4, 59.5],
11: [-54.5, 19.6],
12: [0, 5],
13: [36.9, 49.9],
14: [64, 77],
15: [74, 114],
16: [64, 151],
17: [37, 178],
18: [0, 188],
19: [-37, 178],
20: [-64, 151],
21: [-74, 114],
22: [-64, 77],
23: [-37, 50]
};
var useStyles = makeStyles(function (theme) {
var size = theme.spacing(4);
return {
clockNumber: {
width: size,
height: 32,
userSelect: 'none',
position: 'absolute',
left: "calc((100% - ".concat(typeof size === 'number' ? "".concat(size, "px") : size, ") / 2)"),
display: 'inline-flex',
justifyContent: 'center',
alignItems: 'center',
borderRadius: '50%',
color: theme.palette.type === 'light' ? theme.palette.text.primary : theme.palette.text.hint
},
clockNumberSelected: {
color: theme.palette.primary.contrastText
}
};
}, {
name: 'MuiPickersClockNumber'
});
var ClockNumber = function ClockNumber(_ref) {
var selected = _ref.selected,
label = _ref.label,
index = _ref.index,
isInner = _ref.isInner;
var classes = useStyles();
var className = clsx(classes.clockNumber, selected && classes.clockNumberSelected);
var transformStyle = useMemo(function () {
var position = positions[index];
return {
transform: "translate(".concat(position[0], "px, ").concat(position[1], "px")
};
}, [index]);
return /*#__PURE__*/createElement(Typography, {
component: "span",
className: className,
variant: isInner ? 'body2' : 'body1',
style: transformStyle,
children: label
});
};
var getHourNumbers = function getHourNumbers(_ref) {
var ampm = _ref.ampm,
utils = _ref.utils,
date = _ref.date;
var currentHours = utils.getHours(date);
var hourNumbers = [];
var startHour = ampm ? 1 : 0;
var endHour = ampm ? 12 : 23;
var isSelected = function isSelected(hour) {
if (ampm) {
if (hour === 12) {
return currentHours === 12 || currentHours === 0;
}
return currentHours === hour || currentHours - 12 === hour;
}
return currentHours === hour;
};
for (var hour = startHour; hour <= endHour; hour += 1) {
var label = hour.toString();
if (hour === 0) {
label = '00';
}
var props = {
index: hour,
label: utils.formatNumber(label),
selected: isSelected(hour),
isInner: !ampm && (hour === 0 || hour > 12)
};
hourNumbers.push( /*#__PURE__*/createElement(ClockNumber, _extends({
key: hour
}, props)));
}
return hourNumbers;
};
var getMinutesNumbers = function getMinutesNumbers(_ref2) {
var value = _ref2.value,
utils = _ref2.utils;
var f = utils.formatNumber;
return [/*#__PURE__*/createElement(ClockNumber, {
label: f('00'),
selected: value === 0,
index: 12,
key: 12
}), /*#__PURE__*/createElement(ClockNumber, {
label: f('05'),
selected: value === 5,
index: 1,
key: 1
}), /*#__PURE__*/createElement(ClockNumber, {
label: f('10'),
selected: value === 10,
index: 2,
key: 2
}), /*#__PURE__*/createElement(ClockNumber, {
label: f('15'),
selected: value === 15,
index: 3,
key: 3
}), /*#__PURE__*/createElement(ClockNumber, {
label: f('20'),
selected: value === 20,
index: 4,
key: 4
}), /*#__PURE__*/createElement(ClockNumber, {
label: f('25'),
selected: value === 25,
index: 5,
key: 5
}), /*#__PURE__*/createElement(ClockNumber, {
label: f('30'),
selected: value === 30,
index: 6,
key: 6
}), /*#__PURE__*/createElement(ClockNumber, {
label: f('35'),
selected: value === 35,
index: 7,
key: 7
}), /*#__PURE__*/createElement(ClockNumber, {
label: f('40'),
selected: value === 40,
index: 8,
key: 8
}), /*#__PURE__*/createElement(ClockNumber, {
label: f('45'),
selected: value === 45,
index: 9,
key: 9
}), /*#__PURE__*/createElement(ClockNumber, {
label: f('50'),
selected: value === 50,
index: 10,
key: 10
}), /*#__PURE__*/createElement(ClockNumber, {
label: f('55'),
selected: value === 55,
index: 11,
key: 11
})];
};
var ClockView = function ClockView(_ref) {
var type = _ref.type,
onHourChange = _ref.onHourChange,
onMinutesChange = _ref.onMinutesChange,
onSecondsChange = _ref.onSecondsChange,
ampm = _ref.ampm,
date = _ref.date,
minutesStep = _ref.minutesStep;
var utils = useUtils();
var viewProps = useMemo(function () {
switch (type) {
case ClockType.HOURS:
return {
value: utils.getHours(date),
children: getHourNumbers({
date: date,
utils: utils,
ampm: Boolean(ampm)
}),
onChange: function onChange(value, isFinish) {
var currentMeridiem = getMeridiem(date, utils);
var updatedTimeWithMeridiem = convertToMeridiem(utils.setHours(date, value), currentMeridiem, Boolean(ampm), utils);
onHourChange(updatedTimeWithMeridiem, isFinish);
}
};
case ClockType.MINUTES:
var minutesValue = utils.getMinutes(date);
return {
value: minutesValue,
children: getMinutesNumbers({
value: minutesValue,
utils: utils
}),
onChange: function onChange(value, isFinish) {
var updatedTime = utils.setMinutes(date, value);
onMinutesChange(updatedTime, isFinish);
}
};
case ClockType.SECONDS:
var secondsValue = utils.getSeconds(date);
return {
value: secondsValue,
children: getMinutesNumbers({
value: secondsValue,
utils: utils
}),
onChange: function onChange(value, isFinish) {
var updatedTime = utils.setSeconds(date, value);
onSecondsChange(updatedTime, isFinish);
}
};
default:
throw new Error('You must provide the type for TimePickerView');
}
}, [ampm, date, onHourChange, onMinutesChange, onSecondsChange, type, utils]);
return /*#__PURE__*/createElement(Clock, _extends({
type: type,
ampm: ampm,
minutesStep: minutesStep
}, viewProps));
};
ClockView.displayName = 'TimePickerView';
process.env.NODE_ENV !== "production" ? ClockView.propTypes = {
date: object.isRequired,
onHourChange: func.isRequired,
onMinutesChange: func.isRequired,
onSecondsChange: func.isRequired,
ampm: bool,
minutesStep: number,
type: oneOf(Object.keys(ClockType).map(function (key) {
return ClockType[key];
})).isRequired
} : void 0;
ClockView.defaultProps = {
ampm: true,
minutesStep: 1
};
var ClockView$1 = /*#__PURE__*/memo(ClockView);
export default ClockView$1;
export { ClockView };
//# sourceMappingURL=ClockView.js.map