react-analog-clock/es/styles.js

A themable analog clock component

'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});
var withDefault = function withDefault(value, defaultValue) {
    if (value === null || value === undefined) return defaultValue;
    return value;
};

var AnalogBase = {
    background: function background(s) {
        return s.theme.background;
    },
    backgroundSize: 'cover',
    backgroundPosition: 'center',
    borderRadius: '100%',
    border: function border(s) {
        return s.width / 20 + 'px solid ' + s.theme.border;
    },
    height: function height(s) {
        return s.width;
    },
    position: 'relative',
    width: function width(s) {
        return s.width;
    }
};

var AnalogCenter = {
    background: function background(s) {
        return s.theme.center;
    },
    borderRadius: '100%',
    height: '12px',
    left: '50%',
    position: 'absolute',
    top: '50%',
    transform: 'translateX(-50%) translateY(-50%)',
    width: '12px'
};

var AnalogHand = {
    left: '50%',
    position: 'absolute',
    top: '50%',
    transformOrigin: '50% 100%'
};

var AnalogSecondHand = Object.assign({}, AnalogHand, {
    background: function background(s) {
        return s.theme.seconds;
    },
    height: function height(s) {
        return Math.floor(s.width * 0.425);
    },
    width: function width(s) {
        return withDefault(s.theme.secondHandWidth, 3);
    }
});

var AnalogMinuteHand = Object.assign({}, AnalogHand, {
    background: function background(s) {
        return s.theme.minutes;
    },
    height: function height(s) {
        return Math.floor(s.width * 0.35);
    },
    width: function width(s) {
        return withDefault(s.theme.minuteHandWidth, 6);
    }
});

var AnalogHourHand = Object.assign({}, AnalogHand, {
    background: function background(s) {
        return s.theme.hour;
    },
    height: function height(s) {
        return Math.floor(s.width * 0.2);
    },
    width: function width(s) {
        return withDefault(s.theme.hourHandWidth, 8);
    }
});

var AnalogSmallTick = {
    background: function background(s) {
        return s.theme.tick;
    },
    height: 6,
    left: '50%',
    position: 'absolute',
    top: 6,
    transformOrigin: function transformOrigin(s) {
        return '0 ' + Math.ceil(s.width / 2) + 'px';
    },
    width: function width(s) {
        return withDefault(s.theme.smallTickWidth, 2);
    }
};

var AnalogLargeTick = {
    background: function background(s) {
        return s.theme.tick;
    },
    height: 10,
    left: function left(s) {
        return Math.ceil(s.width / 2) + 2;
    },
    position: 'absolute',
    top: 10,
    transformOrigin: function transformOrigin(s) {
        return '0 ' + Math.ceil(s.width / 2) + 'px';
    },
    width: function width(s) {
        return withDefault(s.theme.largeTickWidth, 4);
    }
};

exports.default = {
    base: AnalogBase,
    center: AnalogCenter,
    second: AnalogSecondHand,
    minute: AnalogMinuteHand,
    hour: AnalogHourHand,
    smallTick: AnalogSmallTick,
    largeTick: AnalogLargeTick
};