Nelze vybrat více než 25 témat Téma musí začínat písmenem nebo číslem, může obsahovat pomlčky („-“) a může být dlouhé až 35 znaků.

ClockPointer.js 4.1 KiB

před 3 roky
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150
  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 _timeUtils = require('./timeUtils');
  20. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  21. function calcAngle(value, base) {
  22. value %= base;
  23. var angle = 360 / base * value;
  24. return angle;
  25. }
  26. function getStyles(props, context, state) {
  27. var hasSelected = props.hasSelected,
  28. type = props.type,
  29. value = props.value;
  30. var inner = state.inner;
  31. var timePicker = context.muiTheme.timePicker;
  32. var angle = type === 'hour' ? calcAngle(value, 12) : calcAngle(value, 60);
  33. var styles = {
  34. root: {
  35. height: inner ? '30%' : '40%',
  36. background: timePicker.accentColor,
  37. width: 2,
  38. left: 'calc(50% - 1px)',
  39. position: 'absolute',
  40. bottom: '50%',
  41. transformOrigin: 'bottom',
  42. pointerEvents: 'none',
  43. transform: 'rotateZ(' + angle + 'deg)'
  44. },
  45. mark: {
  46. boxSizing: 'content-box',
  47. background: timePicker.selectTextColor,
  48. border: '4px solid ' + timePicker.accentColor,
  49. display: hasSelected && 'none',
  50. width: 7,
  51. height: 7,
  52. position: 'absolute',
  53. top: -5,
  54. left: -6,
  55. borderRadius: '100%'
  56. }
  57. };
  58. return styles;
  59. }
  60. var ClockPointer = function (_Component) {
  61. (0, _inherits3.default)(ClockPointer, _Component);
  62. function ClockPointer() {
  63. var _ref;
  64. var _temp, _this, _ret;
  65. (0, _classCallCheck3.default)(this, ClockPointer);
  66. for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
  67. args[_key] = arguments[_key];
  68. }
  69. return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = ClockPointer.__proto__ || (0, _getPrototypeOf2.default)(ClockPointer)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
  70. inner: false
  71. }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
  72. }
  73. (0, _createClass3.default)(ClockPointer, [{
  74. key: 'componentWillMount',
  75. value: function componentWillMount() {
  76. this.setState({
  77. inner: (0, _timeUtils.isInner)(this.props)
  78. });
  79. }
  80. }, {
  81. key: 'componentWillReceiveProps',
  82. value: function componentWillReceiveProps(nextProps) {
  83. this.setState({
  84. inner: (0, _timeUtils.isInner)(nextProps)
  85. });
  86. }
  87. }, {
  88. key: 'render',
  89. value: function render() {
  90. if (this.props.value === null) {
  91. return _react2.default.createElement('span', null);
  92. }
  93. var styles = getStyles(this.props, this.context, this.state);
  94. var prepareStyles = this.context.muiTheme.prepareStyles;
  95. return _react2.default.createElement(
  96. 'div',
  97. { style: prepareStyles(styles.root) },
  98. _react2.default.createElement('div', { style: prepareStyles(styles.mark) })
  99. );
  100. }
  101. }]);
  102. return ClockPointer;
  103. }(_react.Component);
  104. ClockPointer.defaultProps = {
  105. hasSelected: false,
  106. value: null,
  107. type: 'minute'
  108. };
  109. ClockPointer.contextTypes = {
  110. muiTheme: _propTypes2.default.object.isRequired
  111. };
  112. ClockPointer.propTypes = process.env.NODE_ENV !== "production" ? {
  113. hasSelected: _propTypes2.default.bool,
  114. type: _propTypes2.default.oneOf(['hour', 'minute']),
  115. value: _propTypes2.default.number
  116. } : {};
  117. exports.default = ClockPointer;