1 | "use strict";
|
2 | var __extends = (this && this.__extends) || (function () {
|
3 | var extendStatics = function (d, b) {
|
4 | extendStatics = Object.setPrototypeOf ||
|
5 | ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
6 | function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
|
7 | return extendStatics(d, b);
|
8 | };
|
9 | return function (d, b) {
|
10 | extendStatics(d, b);
|
11 | function __() { this.constructor = d; }
|
12 | d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
13 | };
|
14 | })();
|
15 | var __importStar = (this && this.__importStar) || function (mod) {
|
16 | if (mod && mod.__esModule) return mod;
|
17 | var result = {};
|
18 | if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
|
19 | result["default"] = mod;
|
20 | return result;
|
21 | };
|
22 | var __importDefault = (this && this.__importDefault) || function (mod) {
|
23 | return (mod && mod.__esModule) ? mod : { "default": mod };
|
24 | };
|
25 | Object.defineProperty(exports, "__esModule", { value: true });
|
26 | var React = __importStar(require("react"));
|
27 | var clsx_1 = __importDefault(require("clsx"));
|
28 | var ClockType_1 = __importDefault(require("../../constants/ClockType"));
|
29 | var styles_1 = require("@material-ui/core/styles");
|
30 | var ClockPointer = (function (_super) {
|
31 | __extends(ClockPointer, _super);
|
32 | function ClockPointer() {
|
33 | var _this = _super !== null && _super.apply(this, arguments) || this;
|
34 | _this.state = {
|
35 | toAnimateTransform: false,
|
36 | previousType: undefined,
|
37 | };
|
38 | _this.getAngleStyle = function () {
|
39 | var _a = _this.props, value = _a.value, isInner = _a.isInner, type = _a.type;
|
40 | var max = type === ClockType_1.default.HOURS ? 12 : 60;
|
41 | var angle = (360 / max) * value;
|
42 | if (type === ClockType_1.default.HOURS && value > 12) {
|
43 | angle -= 360;
|
44 | }
|
45 | return {
|
46 | height: isInner ? '26%' : '40%',
|
47 | transform: "rotateZ(" + angle + "deg)",
|
48 | };
|
49 | };
|
50 | return _this;
|
51 | }
|
52 | ClockPointer.prototype.render = function () {
|
53 | var _a, _b;
|
54 | var _c = this.props, classes = _c.classes, hasSelected = _c.hasSelected;
|
55 | return (React.createElement("div", { style: this.getAngleStyle(), className: clsx_1.default(classes.pointer, (_a = {},
|
56 | _a[classes.animateTransform] = this.state.toAnimateTransform,
|
57 | _a)) },
|
58 | React.createElement("div", { className: clsx_1.default(classes.thumb, (_b = {},
|
59 | _b[classes.noPoint] = hasSelected,
|
60 | _b)) })));
|
61 | };
|
62 | ClockPointer.getDerivedStateFromProps = function (nextProps, state) {
|
63 | if (nextProps.type !== state.previousType) {
|
64 | return {
|
65 | toAnimateTransform: true,
|
66 | previousType: nextProps.type,
|
67 | };
|
68 | }
|
69 | return {
|
70 | toAnimateTransform: false,
|
71 | previousType: nextProps.type,
|
72 | };
|
73 | };
|
74 | return ClockPointer;
|
75 | }(React.Component));
|
76 | exports.ClockPointer = ClockPointer;
|
77 | exports.styles = function (theme) {
|
78 | return styles_1.createStyles({
|
79 | pointer: {
|
80 | width: 2,
|
81 | backgroundColor: theme.palette.primary.main,
|
82 | position: 'absolute',
|
83 | left: 'calc(50% - 1px)',
|
84 | bottom: '50%',
|
85 | transformOrigin: 'center bottom 0px',
|
86 | },
|
87 | animateTransform: {
|
88 | transition: theme.transitions.create(['transform', 'height']),
|
89 | },
|
90 | thumb: {
|
91 | width: 4,
|
92 | height: 4,
|
93 | backgroundColor: theme.palette.primary.contrastText,
|
94 | borderRadius: '100%',
|
95 | position: 'absolute',
|
96 | top: -21,
|
97 | left: -15,
|
98 | border: "14px solid " + theme.palette.primary.main,
|
99 | boxSizing: 'content-box',
|
100 | },
|
101 | noPoint: {
|
102 | backgroundColor: theme.palette.primary.main,
|
103 | },
|
104 | });
|
105 | };
|
106 | exports.default = styles_1.withStyles(exports.styles, {
|
107 | name: 'MuiPickersClockPointer',
|
108 | })(ClockPointer);
|