i have this component, that calls this other component DateTimeCore, which is a component, where inside there are "BlackMagic" with scripts, and return 4 variables: formattedTime, formattedDate, timeZoneAbbreviation, timeZone.

I would like to convert this DateTime component in a function, and put in a helper.js, pass some parameteres, and return this 4 variables.

class DateTime extends Component {
  render() {
    const {
      date,
      dateFormat,
      render,
    } = this.props;
    const {
      languageCode = 'es-ES',
      timezone = 'Europe/Madrid',
    } = getSiteProperties(this.props);
    return (<DateTimeCore
      date={date}
      dateFormat={dateFormat}
      outputType="amp"
      render={render}
      languageCode={languageCode}
      timezone={timezone}
    />);
  }
}

someone can help me to see how i convert this in a function? to use inside html attributes like:

 <time dateTime={here pass the function(parameters) and return that i need from the component <DateTimeCore />}> </time>

More Info: DateTimeCore component, has inside this:index.d.ts

declare function DateTime(props: any): any;
declare namespace DateTime {
    export namespace propTypes {
        export const date: any;
        export const dateFormat: any;
        export const outputType: any;
        export const languageCode: any;
        export const render: any;
        export const siteProperties: any;
        export const timezone: any;
    }
}
export default DateTime;

And this index.d.ts has this index.js file with this code inside:

 "use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = DateTime;

var _propTypes = _interopRequireDefault(require("prop-types"));

var _dateFnsTz = require("date-fns-tz");

var _timeZoneHelper = require("./time-zone-helper");

var _localeHelper = require("./locale-helper");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function DateTime(props) {
  var date = props.date,
      dateFormat = props.dateFormat,
      countrycode = props.countrycode,
      _props$languageCode = props.languageCode,
      languageCode = _props$languageCode === void 0 ? 'es-ES' : _props$languageCode,
      outputType = props.outputType,
      render = props.render,
      _props$timezone = props.timezone,
      timezone = _props$timezone === void 0 ? 'Europe/Madrid' : _props$timezone;
  var formattedTime = '';
  var timeZoneAbbreviation = '';
  var now = date ? new Date(date) : new Date();
  var localeTZ = (0, _timeZoneHelper.getTimezoneByTimezone)(timezone);
  var timeZone = localeTZ.name;
  var offset = (0, _dateFnsTz.format)(now, 'z', {
    timeZone: timeZone
  }); // cookie provide, use countrycode to use selected timezone

  if (countrycode) {
    localeTZ = (0, _timeZoneHelper.getTimezoneByCountryCode)(countrycode);
    timeZone = localeTZ.name;
    offset = (0, _dateFnsTz.format)(now, 'z', {
      timeZone: timeZone
    });
  }

  now = (0, _dateFnsTz.utcToZonedTime)(now, timeZone);

  if (localeTZ.timezone) {
    timeZoneAbbreviation = localeTZ.timezone[offset];
  } else {
    timeZoneAbbreviation = offset;
  }

  formattedTime = (0, _dateFnsTz.format)(now, 'HH:mm', {
    timeZone: timeZone
  });

  if (outputType === 'amp') {
    now = (0, _dateFnsTz.format)(now, 'yyyy-MM-dd HH:mm:ss', {
      timeZone: timeZone,
      locale: (0, _localeHelper.getLocale)(languageCode)
    });
  }

  var formattedDate = function () {
    var formattedDateTmp = '';
    now = typeof now === 'string' ? new Date(now) : now;

    if (dateFormat) {
      formattedDateTmp = (0, _dateFnsTz.format)(now, dateFormat, {
        timeZone: timeZone,
        locale: (0, _localeHelper.getLocale)(languageCode)
      });
    } else {
      // Day of the story
      var leadingZeroDay = (0, _dateFnsTz.format)(now, 'dd'); // Calculate month with short format: Spanish: ENE, FEB, ... English: JAN, FEB,...

      var localeMonth = (0, _dateFnsTz.format)(now, 'MMM', {
        timeZone: timeZone,
        locale: (0, _localeHelper.getLocale)(languageCode)
      });
      var localeYear = (0, _dateFnsTz.format)(now, 'yyyy');
      formattedDateTmp = "".concat(leadingZeroDay, " ").concat(localeMonth, " ").concat(localeYear);
    }

    return formattedDateTmp;
  }();

  return render({
    formattedDate: formattedDate,
    formattedTime: formattedTime,
    timeZone: timeZone,
    timeZoneAbbreviation: timeZoneAbbreviation
  });
}

DateTime.propTypes = {
  date: _propTypes.default.string,
  dateFormat: _propTypes.default.string,
  outputType: _propTypes.default.string,
  languageCode: _propTypes.default.string,
  render: _propTypes.default.func.isRequired,
  siteProperties: _propTypes.default.object,
  timezone: _propTypes.default.string
};
//# sourceMappingURL=index.js.map

Thanks

CodePudding user response：

const DateTime = props => { // everyrhing inside your render method }

CodePudding user response：

So if I understand correctly, you want to have a JS function that computes and returns what you get from the component?

You could write a function getDateTime(date, dateFormat, ...) in a utils.js or similar file and import in any component that needs it.

import { getDateTime } from './utils.js';

class DateTime extends Component {
  render() {
    const {
      date,
      dateFormat,
      render,
    } = this.props;
    const {
      languageCode = 'es-ES',
      timezone = 'Europe/Madrid',
    } = getSiteProperties(this.props);
    return (
       <div>
        `Calculated: ${getDateTime(date, dateFormat, ...)`
       </div>
    );
  }
}

Something like this?