baseui/button-timed/button-timed.js

A React Component library implementing the Base design language

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
var _button = require("../button");
var _styledComponents = require("./styled-components");
var _utils = require("./utils");
var _overrides = require("../helpers/overrides");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } /*
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 ButtonTimed = props => {
  const {
    initialTime,
    // in seconds
    paused = false,
    onClick: onClickProp,
    disabled,
    kind = _button.KIND.primary,
    children,
    overrides = {},
    ...restProps
  } = props;
  const initialTimeMs = initialTime * 1000;
  const [startTime, setStartTime] = React.useState(Date.now());
  const [timeRemaining, setTimeRemaining] = React.useState(initialTimeMs);
  React.useEffect(() => {
    if (!paused) {
      setStartTime(Date.now() - (initialTimeMs - timeRemaining));
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps -- don't re-run this effect when timeRemaining changes
  }, [paused, initialTimeMs]);
  React.useEffect(() => {
    const intervalId = setInterval(() => {
      if (!paused && timeRemaining > 0) {
        const elapsed = Date.now() - startTime;
        const remaining = Math.max(initialTimeMs - elapsed, 0);
        setTimeRemaining(remaining);
        if (remaining === 0) {
          onClickProp();
        }
      }
    }, 100);
    return () => clearInterval(intervalId);
  }, [startTime, paused, onClickProp, initialTimeMs, timeRemaining]);
  const onClick = () => {
    setTimeRemaining(0);
    onClickProp();
  };
  const {
    TimerContainer: TimerContainerOverride,
    ...buttonOverrides
  } = overrides;
  const [TimerContainer, timerContainerProps] = (0, _overrides.getOverrides)(TimerContainerOverride, _styledComponents.StyledTimerContainer);
  const buttonMergedOverrides = (0, _overrides.mergeOverrides)({
    Root: {
      component: _styledComponents.StyledBaseButtonTimed,
      props: {
        $initialTime: initialTime,
        $timeElapsed: (initialTime * 1000 - timeRemaining) / 1000
      },
      style: {
        ':after': {
          animationPlayState: paused ? 'paused' : 'running'
        }
      }
    }
  }, {
    Root: buttonOverrides.Root || buttonOverrides.BaseButton || {},
    StartEnhancer: buttonOverrides.StartEnhancer || {},
    EndEnhancer: buttonOverrides.EndEnhancer || {},
    LoadingSpinnerContainer: buttonOverrides.LoadingSpinnerContainer || {},
    LoadingSpinner: buttonOverrides.LoadingSpinner || {}
  });
  return /*#__PURE__*/React.createElement(_button.Button, _extends({}, restProps, {
    overrides: buttonMergedOverrides,
    onClick: onClick,
    size: _button.SIZE.large,
    kind: kind,
    shape: _button.SHAPE.default,
    disabled: disabled || timeRemaining === 0
  }), children, /*#__PURE__*/React.createElement(TimerContainer, timerContainerProps, `(${(0, _utils.formatTime)(timeRemaining)})`));
};
var _default = exports.default = ButtonTimed;