25개 이상의 토픽을 선택하실 수 없습니다. Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

217 lines
6.1 KiB

  1. 'use strict';
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
  6. var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
  7. var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
  8. var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
  9. var _createClass2 = require('babel-runtime/helpers/createClass');
  10. var _createClass3 = _interopRequireDefault(_createClass2);
  11. var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
  12. var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
  13. var _inherits2 = require('babel-runtime/helpers/inherits');
  14. var _inherits3 = _interopRequireDefault(_inherits2);
  15. var _react = require('react');
  16. var _react2 = _interopRequireDefault(_react);
  17. var _propTypes = require('prop-types');
  18. var _propTypes2 = _interopRequireDefault(_propTypes);
  19. var _ClockNumber = require('./ClockNumber');
  20. var _ClockNumber2 = _interopRequireDefault(_ClockNumber);
  21. var _ClockPointer = require('./ClockPointer');
  22. var _ClockPointer2 = _interopRequireDefault(_ClockPointer);
  23. var _timeUtils = require('./timeUtils');
  24. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  25. var ClockMinutes = function (_Component) {
  26. (0, _inherits3.default)(ClockMinutes, _Component);
  27. function ClockMinutes() {
  28. var _ref;
  29. var _temp, _this, _ret;
  30. (0, _classCallCheck3.default)(this, ClockMinutes);
  31. for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
  32. args[_key] = arguments[_key];
  33. }
  34. return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = ClockMinutes.__proto__ || (0, _getPrototypeOf2.default)(ClockMinutes)).call.apply(_ref, [this].concat(args))), _this), _this.handleUp = function (event) {
  35. event.preventDefault();
  36. _this.setClock(event.nativeEvent, true);
  37. }, _this.handleMove = function (event) {
  38. event.preventDefault();
  39. if (_this.isMousePressed(event) !== 1) {
  40. return;
  41. }
  42. _this.setClock(event.nativeEvent, false);
  43. }, _this.handleTouch = function (event) {
  44. event.preventDefault();
  45. _this.setClock(event.changedTouches[0], event.type === 'touchend');
  46. }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
  47. }
  48. (0, _createClass3.default)(ClockMinutes, [{
  49. key: 'componentDidMount',
  50. value: function componentDidMount() {
  51. var clockElement = this.refs.mask;
  52. this.center = {
  53. x: clockElement.offsetWidth / 2,
  54. y: clockElement.offsetHeight / 2
  55. };
  56. this.basePoint = {
  57. x: this.center.x,
  58. y: 0
  59. };
  60. }
  61. }, {
  62. key: 'isMousePressed',
  63. value: function isMousePressed(event) {
  64. if (typeof event.buttons === 'undefined') {
  65. return event.nativeEvent.which;
  66. }
  67. return event.buttons;
  68. }
  69. }, {
  70. key: 'setClock',
  71. value: function setClock(event, finish) {
  72. if (typeof event.offsetX === 'undefined') {
  73. var offset = (0, _timeUtils.getTouchEventOffsetValues)(event);
  74. event.offsetX = offset.offsetX;
  75. event.offsetY = offset.offsetY;
  76. }
  77. var minutes = this.getMinutes(event.offsetX, event.offsetY);
  78. this.props.onChange(minutes, finish);
  79. }
  80. }, {
  81. key: 'getMinutes',
  82. value: function getMinutes(offsetX, offsetY) {
  83. var step = 6 * this.props.step;
  84. var x = offsetX - this.center.x;
  85. var y = offsetY - this.center.y;
  86. var cx = this.basePoint.x - this.center.x;
  87. var cy = this.basePoint.y - this.center.y;
  88. var atan = Math.atan2(cx, cy) - Math.atan2(x, y);
  89. var deg = (0, _timeUtils.rad2deg)(atan);
  90. deg = Math.round(deg / step) * step;
  91. deg %= 360;
  92. var value = Math.floor(deg / step) || 0;
  93. return value * this.props.step;
  94. }
  95. }, {
  96. key: 'getMinuteNumbers',
  97. value: function getMinuteNumbers() {
  98. var minutes = [];
  99. for (var i = 0; i < 12; i++) {
  100. minutes.push(i * 5);
  101. }
  102. var selectedMinutes = this.props.initialMinutes;
  103. var hasSelected = false;
  104. var numbers = minutes.map(function (minute) {
  105. var isSelected = selectedMinutes === minute;
  106. if (isSelected) {
  107. hasSelected = true;
  108. }
  109. return _react2.default.createElement(_ClockNumber2.default, {
  110. key: minute,
  111. isSelected: isSelected,
  112. type: 'minute',
  113. value: minute
  114. });
  115. });
  116. return {
  117. numbers: numbers,
  118. hasSelected: hasSelected,
  119. selected: selectedMinutes
  120. };
  121. }
  122. }, {
  123. key: 'render',
  124. value: function render() {
  125. var styles = {
  126. root: {
  127. height: '100%',
  128. width: '100%',
  129. borderRadius: '100%',
  130. position: 'relative',
  131. pointerEvents: 'none',
  132. boxSizing: 'border-box'
  133. },
  134. hitMask: {
  135. height: '100%',
  136. width: '100%',
  137. pointerEvents: 'auto'
  138. }
  139. };
  140. var prepareStyles = this.context.muiTheme.prepareStyles;
  141. var minutes = this.getMinuteNumbers();
  142. return _react2.default.createElement(
  143. 'div',
  144. { ref: 'clock', style: prepareStyles(styles.root) },
  145. _react2.default.createElement(_ClockPointer2.default, { value: minutes.selected, type: 'minute', hasSelected: minutes.hasSelected }),
  146. minutes.numbers,
  147. _react2.default.createElement('div', {
  148. ref: 'mask',
  149. style: prepareStyles(styles.hitMask),
  150. onTouchMove: this.handleTouch,
  151. onTouchEnd: this.handleTouch,
  152. onMouseUp: this.handleUp,
  153. onMouseMove: this.handleMove
  154. })
  155. );
  156. }
  157. }]);
  158. return ClockMinutes;
  159. }(_react.Component);
  160. ClockMinutes.defaultProps = {
  161. initialMinutes: new Date().getMinutes(),
  162. onChange: function onChange() {},
  163. step: 1
  164. };
  165. ClockMinutes.contextTypes = {
  166. muiTheme: _propTypes2.default.object.isRequired
  167. };
  168. ClockMinutes.propTypes = process.env.NODE_ENV !== "production" ? {
  169. initialMinutes: _propTypes2.default.number,
  170. onChange: _propTypes2.default.func,
  171. step: _propTypes2.default.number
  172. } : {};
  173. exports.default = ClockMinutes;