@geneui/components/Time/index.js

The Gene UI components library designed for BI tools

import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.js';
import React__default, { useMemo, useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import { a as dayjs, d as dayjsWithPlugins } from '../dateValidation-67caec66.js';
import { a as getBrowserTimeFormat } from '../localization-4ba17032.js';
import 'react-dom';
import Icon from '../Icon/index.js';
import { s as styleInject } from '../style-inject.es-746bb8ed.js';
import '../_commonjsHelpers-24198af3.js';
import '../index-031ff73c.js';

var css_248z = "[data-gene-ui-version=\"2.16.5\"] .time-holder{align-items:center;display:flex;font-weight:600;line-height:3.2rem;white-space:nowrap}[data-gene-ui-version=\"2.16.5\"] .time-holder>*+*{margin:0 0 0 .3rem}html[dir=rtl] .time-holder>*+*{margin:0 .3rem 0 0}";
styleInject(css_248z);

function Time(_ref) {
  let {
    format,
    showIcon,
    startDate,
    showSeconds,
    ...restProps
  } = _ref;
  const startDateValue = useMemo(() => startDate && dayjs(startDate), [startDate]);
  const difference = useMemo(() => startDateValue ? startDateValue.diff(dayjs()) : 0, [startDateValue]);
  const [time, setTime] = useState(() => Date.now() + difference);
  const timeFormat = format || getBrowserTimeFormat(showSeconds);
  useEffect(() => {
    const intervalId = setInterval(() => {
      setTime(Date.now() + difference);
    }, 1000);
    return () => clearInterval(intervalId);
  }, [difference]);
  return /*#__PURE__*/React__default.createElement("div", _extends({
    className: "time-holder"
  }, restProps), showIcon && /*#__PURE__*/React__default.createElement(Icon, {
    type: "bc-icon-clock"
  }), /*#__PURE__*/React__default.createElement("p", null, dayjsWithPlugins(time).format(timeFormat)));
}
Time.propTypes = {
  /**
   * Displays a clock icon when set to "true"
   */
  showIcon: PropTypes.bool,
  /**
   * Display format
   */
  format: PropTypes.string,
  /**
   * Display seconds when set to "true"
   */
  showSeconds: PropTypes.bool,
  /**
   * Specifing this prop will make the Time atom a counter starting from "startDate"
   */
  startDate: PropTypes.oneOfType([PropTypes.instanceOf(dayjs), PropTypes.instanceOf(Date), PropTypes.string, PropTypes.number])
};
Time.defaultProps = {
  showIcon: false,
  showSeconds: true
};

export { Time as default };