You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

ClockNumber.js 4.0 KiB

3 years ago
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  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 _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');
  16. var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);
  17. var _react = require('react');
  18. var _react2 = _interopRequireDefault(_react);
  19. var _propTypes = require('prop-types');
  20. var _propTypes2 = _interopRequireDefault(_propTypes);
  21. var _timeUtils = require('./timeUtils');
  22. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  23. function getStyles(props, context) {
  24. var styles = {
  25. root: {
  26. directionInvariant: true,
  27. display: 'inline-block',
  28. position: 'absolute',
  29. width: 32,
  30. height: 32,
  31. borderRadius: '100%',
  32. left: 'calc(50% - 16px)',
  33. top: 10,
  34. textAlign: 'center',
  35. paddingTop: 5,
  36. userSelect: 'none', /* Chrome all / Safari all */
  37. fontSize: '1.1em',
  38. pointerEvents: 'none',
  39. boxSizing: 'border-box'
  40. }
  41. };
  42. var muiTheme = context.muiTheme;
  43. var pos = props.value;
  44. if (props.type === 'hour') {
  45. pos %= 12;
  46. } else {
  47. pos = pos / 5;
  48. }
  49. var positions = [[0, 5], [54.5, 16.6], [94.4, 59.5], [109, 114], [94.4, 168.5], [54.5, 208.4], [0, 223], [-54.5, 208.4], [-94.4, 168.5], [-109, 114], [-94.4, 59.5], [-54.5, 19.6]];
  50. var innerPositions = [[0, 40], [36.9, 49.9], [64, 77], [74, 114], [64, 151], [37, 178], [0, 188], [-37, 178], [-64, 151], [-74, 114], [-64, 77], [-37, 50]];
  51. if (props.isSelected) {
  52. styles.root.backgroundColor = muiTheme.timePicker.accentColor;
  53. styles.root.color = muiTheme.timePicker.selectTextColor;
  54. }
  55. var transformPos = positions[pos];
  56. if ((0, _timeUtils.isInner)(props)) {
  57. styles.root.width = 28;
  58. styles.root.height = 28;
  59. styles.root.left = 'calc(50% - 14px)';
  60. transformPos = innerPositions[pos];
  61. }
  62. var _transformPos = transformPos,
  63. _transformPos2 = (0, _slicedToArray3.default)(_transformPos, 2),
  64. x = _transformPos2[0],
  65. y = _transformPos2[1];
  66. styles.root.transform = 'translate(' + x + 'px, ' + y + 'px)';
  67. return styles;
  68. }
  69. var ClockNumber = function (_Component) {
  70. (0, _inherits3.default)(ClockNumber, _Component);
  71. function ClockNumber() {
  72. (0, _classCallCheck3.default)(this, ClockNumber);
  73. return (0, _possibleConstructorReturn3.default)(this, (ClockNumber.__proto__ || (0, _getPrototypeOf2.default)(ClockNumber)).apply(this, arguments));
  74. }
  75. (0, _createClass3.default)(ClockNumber, [{
  76. key: 'render',
  77. value: function render() {
  78. var prepareStyles = this.context.muiTheme.prepareStyles;
  79. var styles = getStyles(this.props, this.context);
  80. var clockNumber = this.props.value === 0 ? '00' : this.props.value;
  81. return _react2.default.createElement(
  82. 'span',
  83. { style: prepareStyles(styles.root) },
  84. clockNumber
  85. );
  86. }
  87. }]);
  88. return ClockNumber;
  89. }(_react.Component);
  90. ClockNumber.defaultProps = {
  91. value: 0,
  92. type: 'minute',
  93. isSelected: false
  94. };
  95. ClockNumber.contextTypes = {
  96. muiTheme: _propTypes2.default.object.isRequired
  97. };
  98. ClockNumber.propTypes = process.env.NODE_ENV !== "production" ? {
  99. isSelected: _propTypes2.default.bool,
  100. onSelected: _propTypes2.default.func,
  101. type: _propTypes2.default.oneOf(['hour', 'minute']),
  102. value: _propTypes2.default.number
  103. } : {};
  104. exports.default = ClockNumber;