baseui/button-timed/styled-components.js

A React Component library implementing the Base design language

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StyledTimerContainer = exports.StyledBaseButtonTimed = void 0;
var _index = require("../styles/index");
var _button = require("../button");
var _util = require("../styles/util");
/*
Copyright (c) Uber Technologies, Inc.

This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/

const StyledBaseButtonTimed = exports.StyledBaseButtonTimed = (0, _index.withStyle)(_button.StyledBaseButton, ({
  $theme,
  $initialTime,
  $timeElapsed
}) => {
  const completionPercentage = $timeElapsed / $initialTime * 100;
  const restPercentage = 100 - completionPercentage;
  const timeLeft = $initialTime - $timeElapsed;
  return {
    position: 'relative',
    ...($initialTime > 0 ? {
      ':after': {
        animationDuration: `${timeLeft}s`,
        animationName: {
          from: {
            transform: `translateX(${completionPercentage}%) scaleX(${restPercentage}%)`
          },
          to: {
            transform: 'translateX(100%) scaleX(0)'
          }
        },
        animationTimingFunction: 'linear',
        display: 'inline-block',
        content: '""',
        width: '100%',
        height: '100%',
        zIndex: '1',
        position: 'absolute',
        backgroundColor: (0, _util.hexToRgb)($theme.colors.backgroundPrimary, '0.2'),
        transformOrigin: 'left'
      }
    } : {})
  };
});
StyledBaseButtonTimed.displayName = "StyledBaseButtonTimed";
StyledBaseButtonTimed.displayName = 'StyledBaseButtonTimed';
const StyledTimerContainer = exports.StyledTimerContainer = (0, _index.styled)('span', {
  // minWidth to ensure button width stays consistent as timeRemaining changes
  minWidth: '53px'
});
StyledTimerContainer.displayName = "StyledTimerContainer";
StyledTimerContainer.displayName = 'StyledTimerContainer';