@nomios/web-uikit
Version:
Nomios' living web UIKit
44 lines (42 loc) • 1.31 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import styles from './Display.css';
const Display = ({
currentValue
}) => {
const ten = classNames(styles.ten, styles['digit-wrapper']);
const one = classNames(styles.one, styles['digit-wrapper']);
const tenDigit = Math.floor(currentValue / 10);
const tens = [0, 1];
const ones = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
return React.createElement("div", {
className: styles['display-wrapper']
}, React.createElement("div", {
className: styles['counter-wrapper']
}, React.createElement("div", {
className: styles['digits-display']
}, React.createElement("div", {
className: ten,
style: {
transform: `translateY(${-9 * tenDigit}rem)`
}
}, tens.map(elem => React.createElement("div", {
key: elem
}, elem)))), React.createElement("div", {
className: styles['digits-display']
}, React.createElement("div", {
className: one,
style: {
transform: `translateY(${-9 * (currentValue - 1)}rem)`
}
}, ones.map(elem => React.createElement("div", {
key: elem
}, elem)))), React.createElement("h3", {
className: styles.minutes
}, "min")));
};
Display.propTypes = {
currentValue: PropTypes.number.isRequired
};
export default Display;