1 | import { createElement, Component } from 'react';
|
2 | import { oneOf, number, func, arrayOf, node, bool, any } from 'prop-types';
|
3 | import clsx from 'clsx';
|
4 | import { withStyles, createStyles } from '@material-ui/core/styles';
|
5 | import _classCallCheck from '@babel/runtime/helpers/esm/classCallCheck';
|
6 | import _createClass from '@babel/runtime/helpers/esm/createClass';
|
7 | import _possibleConstructorReturn from '@babel/runtime/helpers/esm/possibleConstructorReturn';
|
8 | import _getPrototypeOf from '@babel/runtime/helpers/esm/getPrototypeOf';
|
9 | import _inherits from '@babel/runtime/helpers/esm/inherits';
|
10 |
|
11 | var ClockType;
|
12 |
|
13 | (function (ClockType) {
|
14 | ClockType["HOURS"] = "hours";
|
15 | ClockType["MINUTES"] = "minutes";
|
16 | ClockType["SECONDS"] = "seconds";
|
17 | })(ClockType || (ClockType = {}));
|
18 |
|
19 | var ClockType$1 = ClockType;
|
20 |
|
21 | var ClockPointer =
|
22 |
|
23 | function (_React$Component) {
|
24 | _inherits(ClockPointer, _React$Component);
|
25 |
|
26 | function ClockPointer() {
|
27 | var _getPrototypeOf2;
|
28 |
|
29 | var _this;
|
30 |
|
31 | _classCallCheck(this, ClockPointer);
|
32 |
|
33 | for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
34 | args[_key] = arguments[_key];
|
35 | }
|
36 |
|
37 | _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(ClockPointer)).call.apply(_getPrototypeOf2, [this].concat(args)));
|
38 | _this.state = {
|
39 | toAnimateTransform: false,
|
40 | previousType: undefined
|
41 | };
|
42 |
|
43 | _this.getAngleStyle = function () {
|
44 | var _this$props = _this.props,
|
45 | value = _this$props.value,
|
46 | isInner = _this$props.isInner,
|
47 | type = _this$props.type;
|
48 | var max = type === ClockType$1.HOURS ? 12 : 60;
|
49 | var angle = 360 / max * value;
|
50 |
|
51 | if (type === ClockType$1.HOURS && value > 12) {
|
52 | angle -= 360;
|
53 | }
|
54 |
|
55 | return {
|
56 | height: isInner ? '26%' : '40%',
|
57 | transform: "rotateZ(".concat(angle, "deg)")
|
58 | };
|
59 | };
|
60 |
|
61 | return _this;
|
62 | }
|
63 |
|
64 | _createClass(ClockPointer, [{
|
65 | key: "render",
|
66 | value: function render() {
|
67 | var _this$props2 = this.props,
|
68 | classes = _this$props2.classes,
|
69 | hasSelected = _this$props2.hasSelected;
|
70 | return createElement("div", {
|
71 | style: this.getAngleStyle(),
|
72 | className: clsx(classes.pointer, this.state.toAnimateTransform && classes.animateTransform)
|
73 | }, createElement("div", {
|
74 | className: clsx(classes.thumb, hasSelected && classes.noPoint)
|
75 | }));
|
76 | }
|
77 | }]);
|
78 |
|
79 | return ClockPointer;
|
80 | }(Component);
|
81 |
|
82 | ClockPointer.getDerivedStateFromProps = function (nextProps, state) {
|
83 | if (nextProps.type !== state.previousType) {
|
84 | return {
|
85 | toAnimateTransform: true,
|
86 | previousType: nextProps.type
|
87 | };
|
88 | }
|
89 |
|
90 | return {
|
91 | toAnimateTransform: false,
|
92 | previousType: nextProps.type
|
93 | };
|
94 | };
|
95 |
|
96 | var styles = function styles(theme) {
|
97 | return createStyles({
|
98 | pointer: {
|
99 | width: 2,
|
100 | backgroundColor: theme.palette.primary.main,
|
101 | position: 'absolute',
|
102 | left: 'calc(50% - 1px)',
|
103 | bottom: '50%',
|
104 | transformOrigin: 'center bottom 0px'
|
105 | },
|
106 | animateTransform: {
|
107 | transition: theme.transitions.create(['transform', 'height'])
|
108 | },
|
109 | thumb: {
|
110 | width: 4,
|
111 | height: 4,
|
112 | backgroundColor: theme.palette.primary.contrastText,
|
113 | borderRadius: '100%',
|
114 | position: 'absolute',
|
115 | top: -21,
|
116 | left: -15,
|
117 | border: "14px solid ".concat(theme.palette.primary.main),
|
118 | boxSizing: 'content-box'
|
119 | },
|
120 | noPoint: {
|
121 | backgroundColor: theme.palette.primary.main
|
122 | }
|
123 | });
|
124 | };
|
125 | var ClockPointer$1 = withStyles(styles, {
|
126 | name: 'MuiPickersClockPointer'
|
127 | })(ClockPointer);
|
128 |
|
129 | var center = {
|
130 | x: 260 / 2,
|
131 | y: 260 / 2
|
132 | };
|
133 | var basePoint = {
|
134 | x: center.x,
|
135 | y: 0
|
136 | };
|
137 | var cx = basePoint.x - center.x;
|
138 | var cy = basePoint.y - center.y;
|
139 |
|
140 | var rad2deg = function rad2deg(rad) {
|
141 | return rad * 57.29577951308232;
|
142 | };
|
143 |
|
144 | var getAngleValue = function getAngleValue(step, offsetX, offsetY) {
|
145 | var x = offsetX - center.x;
|
146 | var y = offsetY - center.y;
|
147 | var atan = Math.atan2(cx, cy) - Math.atan2(x, y);
|
148 | var deg = rad2deg(atan);
|
149 | deg = Math.round(deg / step) * step;
|
150 | deg %= 360;
|
151 | var value = Math.floor(deg / step) || 0;
|
152 | var delta = Math.pow(x, 2) + Math.pow(y, 2);
|
153 | var distance = Math.sqrt(delta);
|
154 | return {
|
155 | value: value,
|
156 | distance: distance
|
157 | };
|
158 | };
|
159 |
|
160 | var getHours = function getHours(offsetX, offsetY, ampm) {
|
161 | var _getAngleValue = getAngleValue(30, offsetX, offsetY),
|
162 | value = _getAngleValue.value,
|
163 | distance = _getAngleValue.distance;
|
164 |
|
165 | value = value || 12;
|
166 |
|
167 | if (!ampm) {
|
168 | if (distance < 90) {
|
169 | value += 12;
|
170 | value %= 24;
|
171 | }
|
172 | } else {
|
173 | value %= 12;
|
174 | }
|
175 |
|
176 | return value;
|
177 | };
|
178 | var getMinutes = function getMinutes(offsetX, offsetY) {
|
179 | var step = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
|
180 | var angleStep = step * 6;
|
181 |
|
182 | var _getAngleValue2 = getAngleValue(angleStep, offsetX, offsetY),
|
183 | value = _getAngleValue2.value;
|
184 |
|
185 | value = value * step % 60;
|
186 | return value;
|
187 | };
|
188 | var getMeridiem = function getMeridiem(date, utils) {
|
189 | return utils.getHours(date) >= 12 ? 'pm' : 'am';
|
190 | };
|
191 | var convertToMeridiem = function convertToMeridiem(time, meridiem, ampm, utils) {
|
192 | if (ampm) {
|
193 | var currentMeridiem = utils.getHours(time) >= 12 ? 'pm' : 'am';
|
194 |
|
195 | if (currentMeridiem !== meridiem) {
|
196 | var hours = meridiem === 'am' ? utils.getHours(time) - 12 : utils.getHours(time) + 12;
|
197 | return utils.setHours(time, hours);
|
198 | }
|
199 | }
|
200 |
|
201 | return time;
|
202 | };
|
203 |
|
204 | var Clock =
|
205 |
|
206 | function (_React$Component) {
|
207 | _inherits(Clock, _React$Component);
|
208 |
|
209 | function Clock() {
|
210 | var _getPrototypeOf2;
|
211 |
|
212 | var _this;
|
213 |
|
214 | _classCallCheck(this, Clock);
|
215 |
|
216 | for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
217 | args[_key] = arguments[_key];
|
218 | }
|
219 |
|
220 | _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(Clock)).call.apply(_getPrototypeOf2, [this].concat(args)));
|
221 | _this.isMoving = false;
|
222 |
|
223 | _this.handleTouchMove = function (e) {
|
224 | _this.isMoving = true;
|
225 |
|
226 | _this.setTime(e);
|
227 | };
|
228 |
|
229 | _this.handleTouchEnd = function (e) {
|
230 | if (_this.isMoving) {
|
231 | _this.setTime(e, true);
|
232 |
|
233 | _this.isMoving = false;
|
234 | }
|
235 | };
|
236 |
|
237 | _this.handleMove = function (e) {
|
238 | e.preventDefault();
|
239 | e.stopPropagation();
|
240 |
|
241 | var isButtonPressed = typeof e.buttons === 'undefined' ? e.nativeEvent.which === 1 : e.buttons === 1;
|
242 |
|
243 | if (isButtonPressed) {
|
244 | _this.setTime(e.nativeEvent, false);
|
245 | }
|
246 | };
|
247 |
|
248 | _this.handleMouseUp = function (e) {
|
249 | if (_this.isMoving) {
|
250 | _this.isMoving = false;
|
251 | }
|
252 |
|
253 | _this.setTime(e.nativeEvent, true);
|
254 | };
|
255 |
|
256 | _this.hasSelected = function () {
|
257 | var _this$props = _this.props,
|
258 | type = _this$props.type,
|
259 | value = _this$props.value;
|
260 |
|
261 | if (type === ClockType$1.HOURS) {
|
262 | return true;
|
263 | }
|
264 |
|
265 | return value % 5 === 0;
|
266 | };
|
267 |
|
268 | return _this;
|
269 | }
|
270 |
|
271 | _createClass(Clock, [{
|
272 | key: "setTime",
|
273 | value: function setTime(e) {
|
274 | var isFinish = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
275 | var offsetX = e.offsetX,
|
276 | offsetY = e.offsetY;
|
277 |
|
278 | if (typeof offsetX === 'undefined') {
|
279 | var rect = e.target.getBoundingClientRect();
|
280 | offsetX = e.changedTouches[0].clientX - rect.left;
|
281 | offsetY = e.changedTouches[0].clientY - rect.top;
|
282 | }
|
283 |
|
284 | var value = this.props.type === ClockType$1.SECONDS || this.props.type === ClockType$1.MINUTES ? getMinutes(offsetX, offsetY, this.props.minutesStep) : getHours(offsetX, offsetY, Boolean(this.props.ampm));
|
285 | this.props.onChange(value, isFinish);
|
286 | }
|
287 | }, {
|
288 | key: "render",
|
289 | value: function render() {
|
290 | var _this$props2 = this.props,
|
291 | classes = _this$props2.classes,
|
292 | value = _this$props2.value,
|
293 | children = _this$props2.children,
|
294 | type = _this$props2.type,
|
295 | ampm = _this$props2.ampm;
|
296 | var isPointerInner = !ampm && type === ClockType$1.HOURS && (value < 1 || value > 12);
|
297 | return createElement("div", {
|
298 | className: classes.container
|
299 | }, createElement("div", {
|
300 | className: classes.clock
|
301 | }, createElement("div", {
|
302 | role: "menu",
|
303 | tabIndex: -1,
|
304 | className: classes.squareMask,
|
305 | onTouchMove: this.handleTouchMove,
|
306 | onTouchEnd: this.handleTouchEnd,
|
307 | onMouseUp: this.handleMouseUp,
|
308 | onMouseMove: this.handleMove
|
309 | }), createElement("div", {
|
310 | className: classes.pin
|
311 | }), createElement(ClockPointer$1, {
|
312 | type: type,
|
313 | value: value,
|
314 | isInner: isPointerInner,
|
315 | hasSelected: this.hasSelected()
|
316 | }), children));
|
317 | }
|
318 | }]);
|
319 |
|
320 | return Clock;
|
321 | }(Component);
|
322 | process.env.NODE_ENV !== "production" ? Clock.propTypes = {
|
323 | type: oneOf(Object.keys(ClockType$1).map(function (key) {
|
324 | return ClockType$1[key];
|
325 | })).isRequired,
|
326 | value: number.isRequired,
|
327 | onChange: func.isRequired,
|
328 | children: arrayOf(node).isRequired,
|
329 | ampm: bool,
|
330 | minutesStep: number,
|
331 | innerRef: any
|
332 | } : void 0;
|
333 | Clock.defaultProps = {
|
334 | ampm: false,
|
335 | minutesStep: 1
|
336 | };
|
337 | var styles$1 = function styles(theme) {
|
338 | return createStyles({
|
339 | container: {
|
340 | display: 'flex',
|
341 | justifyContent: 'center',
|
342 | alignItems: 'flex-end',
|
343 | margin: "".concat(theme.spacing(2), "px 0 ").concat(theme.spacing(1), "px")
|
344 | },
|
345 | clock: {
|
346 | backgroundColor: 'rgba(0,0,0,.07)',
|
347 | borderRadius: '50%',
|
348 | height: 260,
|
349 | width: 260,
|
350 | position: 'relative',
|
351 | pointerEvents: 'none'
|
352 | },
|
353 | squareMask: {
|
354 | width: '100%',
|
355 | height: '100%',
|
356 | position: 'absolute',
|
357 | pointerEvents: 'auto',
|
358 | outline: 'none',
|
359 | touchActions: 'none',
|
360 | userSelect: 'none',
|
361 | '&:active': {
|
362 | cursor: 'move'
|
363 | }
|
364 | },
|
365 | pin: {
|
366 | width: 6,
|
367 | height: 6,
|
368 | borderRadius: '50%',
|
369 | backgroundColor: theme.palette.primary.main,
|
370 | position: 'absolute',
|
371 | top: '50%',
|
372 | left: '50%',
|
373 | transform: 'translate(-50%, -50%)'
|
374 | }
|
375 | });
|
376 | };
|
377 | var Clock$1 = withStyles(styles$1, {
|
378 | name: 'MuiPickersClock'
|
379 | })(Clock);
|
380 |
|
381 | export { Clock as C, Clock$1 as a, ClockType$1 as b, convertToMeridiem as c, getMeridiem as g, styles$1 as s };
|
382 |
|