Files
redash/client/app/components/Timer.jsx
Gabriel Dutra cb654b3f21 Migrate Widget component to React (#4020)
* Improve sizing for Number inputs

Co-Authored-By: Ran Byron <ranbena@gmail.com>

* Migrate WidgetDialog

* Start migrating Widget

* Update textbox to use HtmlContent

* QueryLink migration and some updates

* Add visualization rendering

* Render widget

* Add delete button

* Update AutoHeight

* Add widget bottom

* Add Drodpown button

* Split Widget component

* Update with #4056 and trigger netlify

* In progress: use composition

* Add header and footer

* Update widget actions positioning

* Re-render when refreshing from widget

* Add workaround to force DashboardGrid re-render

* VisualizationWidgetFooter component

* VisualizationWidget menu

* Separate RestrictedWidget

* Update tests

* Update margin for Parameters

* Remove widget files

* Revert "Improve sizing for Number inputs"

This reverts commit a02ce8f0aa.

* Some cleanup

* Move refresh logic to the Dashboard

* Add loadingWidgets logic to the public dashboard

* Add onLoadWidget

* Remove parameter from URL when empty

* Recreate widget array instead of loadingWidgets

* Add comment about re-rendering + whitespace missing

* CR changes

* Use plain html instead of string syntax

Co-Authored-By: Ran Byron <ranbena@gmail.com>
2019-09-20 22:08:42 +03:00

41 lines
1.0 KiB
JavaScript

import React, { useMemo, useEffect } from 'react';
import moment from 'moment';
import PropTypes from 'prop-types';
import { react2angular } from 'react2angular';
import { Moment } from '@/components/proptypes';
import useForceUpdate from '@/lib/hooks/useForceUpdate';
export function Timer({ from }) {
const startTime = useMemo(() => moment(from).valueOf(), [from]);
const forceUpdate = useForceUpdate();
useEffect(() => {
const timer = setInterval(forceUpdate, 1000);
return () => clearInterval(timer);
}, []);
const diff = moment.now() - startTime;
const format = diff > 1000 * 60 * 60 ? 'HH:mm:ss' : 'mm:ss'; // no HH under an hour
return (<span className="rd-timer">{moment.utc(diff).format(format)}</span>);
}
Timer.propTypes = {
from: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
PropTypes.instanceOf(Date),
Moment,
]),
};
Timer.defaultProps = {
from: null,
};
export default function init(ngModule) {
ngModule.component('rdTimer', react2angular(Timer));
}
init.init = true;