@talend/react-components/lib/VirtualizedList/CellDatetime/CellDatetime.component.js

Set of react components.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.CellDatetimeComponent = void 0;
exports.computeValue = computeValue;
exports.default = void 0;
exports.getTooltipLabel = getTooltipLabel;
var _react = require("react");
var _reactI18next = require("react-i18next");
var _classnames = _interopRequireDefault(require("classnames"));
var _format = require("date-fns/format");
var _formatDistanceToNow = require("date-fns/formatDistanceToNow");
var _isValid = require("date-fns/isValid");
var _parseISO = require("date-fns/parseISO");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _utils = require("@talend/utils");
var _constants = _interopRequireDefault(require("../../constants"));
var _locale = _interopRequireDefault(require("../../i18n/DateFnsLocale/locale"));
var _TooltipTrigger = _interopRequireDefault(require("../../TooltipTrigger"));
var _translate = _interopRequireDefault(require("../../translate"));
var _CellDatetimeModule = _interopRequireDefault(require("./CellDatetime.module.scss"));
var _lodash = require("lodash");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const DATE_TIME_FORMAT = 'yyyy-MM-dd HH:mm:ss';
function computeValue(cellData, columnData, t) {
  const date = new Date(cellData);
  const isDateValid = (0, _isValid.isValid)(date);
  if (isDateValid) {
    const dateFNS = (0, _parseISO.parseISO)(date.toISOString());
    if (dateFNS && columnData.mode === 'ago') {
      return (0, _formatDistanceToNow.formatDistanceToNow)(dateFNS, {
        addSuffix: true,
        locale: (0, _locale.default)(t)
      });
    } else if (columnData.mode === 'format') {
      if (columnData.timeZone) {
        return _utils.date.formatToTimeZone(dateFNS, columnData.pattern || DATE_TIME_FORMAT, {
          ...(columnData.sourceTimeZone && {
            sourceTimeZone: columnData.sourceTimeZone
          }),
          timeZone: columnData.timeZone,
          locale: (0, _locale.default)(t)
        });
      }
      return (0, _format.format)(dateFNS, _utils.date.formatToUnicode(columnData.pattern || DATE_TIME_FORMAT), {
        locale: (0, _locale.default)(t)
      });
    }
  }
  return cellData;
}
function getTooltipLabel(cellData, columnData, t) {
  if (typeof columnData.getTooltipLabel === 'function') {
    return columnData.getTooltipLabel(cellData);
  }
  const date = new Date(cellData);
  const isDateValid = (0, _isValid.isValid)(date);
  if (columnData.mode === 'ago' && isDateValid) {
    let tooltipLabel = '';
    if (columnData.timeZone) {
      tooltipLabel = _utils.date.formatToTimeZone(date, columnData.pattern || DATE_TIME_FORMAT, {
        timeZone: columnData.timeZone,
        locale: (0, _locale.default)(t)
      });
    } else {
      tooltipLabel = (0, _format.format)(date, _utils.date.formatToUnicode(columnData.pattern || DATE_TIME_FORMAT), {
        locale: (0, _locale.default)(t)
      });
    }
    return tooltipLabel;
  }
  return columnData.tooltipLabel;
}
/**
 * Cell renderer that displays text + icon
 */
class CellDatetimeComponent extends _react.Component {
  shouldComponentUpdate(nextProps) {
    const watch = Object.keys(CellDatetimeComponent.propTypes.columnData);
    return this.props.cellData !== nextProps.cellData || !(0, _lodash.isEqual)((0, _lodash.pick)(this.props.columnData, watch), (0, _lodash.pick)(nextProps.columnData, watch));
  }
  render() {
    const {
      cellData,
      columnData,
      t
    } = this.props;
    const computedValue = computeValue(cellData, columnData, t);
    const tooltipLabel = getTooltipLabel(cellData, columnData, t);
    const cell = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: (0, _classnames.default)('cell-datetime-container', _CellDatetimeModule.default['cell-datetime-container']),
      children: computedValue
    });
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipTrigger.default, {
      label: tooltipLabel || computedValue,
      tooltipPlacement: columnData.tooltipPlacement || 'top',
      children: cell
    });
  }
}
exports.CellDatetimeComponent = CellDatetimeComponent;
CellDatetimeComponent.displayName = 'VirtualizedList(CellDatetime)';
CellDatetimeComponent.propTypes = {
  // The cell value : props.rowData[props.dataKey]
  cellData: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
  // Column data
  columnData: _propTypes.default.shape({
    tooltipPlacement: _propTypes.default.string,
    tooltipLabel: _propTypes.default.string,
    mode: _propTypes.default.string.isRequired,
    pattern: _propTypes.default.string,
    getTooltipLabel: _propTypes.default.func
  }).isRequired,
  t: _propTypes.default.func
};
CellDatetimeComponent.defaultProps = {
  t: (0, _translate.default)()
};
var _default = exports.default = (0, _reactI18next.withTranslation)(_constants.default)(CellDatetimeComponent);
//# sourceMappingURL=CellDatetime.component.js.map