react-analog-clock/lib/AnalogClockLayout.js

A themable analog clock component

'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.default = AnalogClockLayout;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function renderNotches(_ref, showSmallTicks) {
    var smallTick = _ref.smallTick,
        largeTick = _ref.largeTick;

    var notches = [];
    for (var i = 0; i < 60; i++) {
        var style = Object.assign({}, i % 5 === 0 ? largeTick : smallTick, {
            transform: 'translateX(-50%) translateY(-100%) rotate(' + i * 6 + 'deg)'
        });
        if (i % 5 !== 0 && !showSmallTicks) continue;
        notches.push(_react2.default.createElement('span', { key: i, style: style }));
    }
    return notches;
}

function AnalogClockLayout(_ref2) {
    var hour = _ref2.hour,
        minutes = _ref2.minutes,
        seconds = _ref2.seconds,
        styles = _ref2.styles,
        showSmallTicks = _ref2.showSmallTicks;

    // +1 to center align
    var secondStyle = Object.assign({}, styles.second, {
        transform: 'translateX(-50%) translateY(-100%) rotate(' + (seconds * 6 + 1) + 'deg)'
    });
    // +1 to center align
    var minuteStyle = Object.assign({}, styles.minute, {
        transform: 'translateX(-50%) translateY(-100%) rotate(' + (minutes * 6 + 1) + 'deg)'
    });
    // +1.5 to center align
    var hourStyle = Object.assign({}, styles.hour, {
        transform: 'translateX(-50%) translateY(-100%) rotate(' + (hour * 30 + 1.5) + 'deg)'
    });
    return _react2.default.createElement(
        'div',
        { style: styles.base },
        _react2.default.createElement('div', { 'data-testid': 'seconds', style: secondStyle }),
        _react2.default.createElement('div', { 'data-testid': 'minutes', style: minuteStyle }),
        _react2.default.createElement('div', { 'data-testid': 'hour', style: hourStyle }),
        _react2.default.createElement('div', { style: styles.center }),
        renderNotches(styles, showSmallTicks)
    );
}

AnalogClockLayout.propTypes = {
    hour: _propTypes2.default.number.isRequired,
    minutes: _propTypes2.default.number.isRequired,
    seconds: _propTypes2.default.number.isRequired,
    styles: _propTypes2.default.shape({
        second: _propTypes2.default.object.isRequired,
        minute: _propTypes2.default.object.isRequired,
        hour: _propTypes2.default.object.isRequired
    }).isRequired,
    showSmallTicks: _propTypes2.default.bool.isRequired
};