chayns-components
Version:
A set of beautiful React components for developing chayns® applications.
215 lines (212 loc) • 7.2 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireWildcard(require("react"));
var _isServer = require("../../utils/isServer");
var _formatDate = require("./utils/formatDate");
var _Tooltip = _interopRequireDefault(require("../../react-chayns-tooltip/component/Tooltip"));
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
/**
* @component
*/
/**
* Formats a date or date range to be easily readable and reveals the absolute
* date on hover.
*/
class DateInfo extends _react.PureComponent {
constructor(props) {
super(props);
this.setLanguage = callback => {
let {
language
} = this.props;
if (!language) {
if ((0, _isServer.isServer)()) {
language = 'de';
} else {
language = (chayns.env.parameters.translang || chayns.env.site.translang || chayns.env.language || window.navigator.language || 'de').substring(0, 2).toLowerCase();
}
}
if (!(language.indexOf('de') > -1 || language.indexOf('en') > -1 || language.indexOf('nl') > -1)) {
language = 'de';
}
callback(language);
};
this.setLanguage(language => {
this.state = {
language
};
});
}
componentDidUpdate(prevProps) {
const {
language
} = this.props;
if (prevProps.language !== language) {
this.setLanguage(lang => this.setState({
language: lang
}));
}
}
render() {
const {
language
} = this.state;
const {
date,
noTitle,
children,
showDate,
showTime,
writeMonth,
writeDay,
date2,
useToday,
useTomorrowYesterday,
hideYear
} = this.props;
let txt = (0, _formatDate.getRelativeDateString)(date, {
language,
showDate,
showTime,
writeDay,
writeMonth,
useToday,
useTomorrowYesterday,
hideYear
});
if (date2) {
txt += ' - ';
if (new Date(date).toDateString() === new Date(date2).toDateString()) {
txt += (0, _formatDate.getRelativeDateString)(date2, {
language,
showDate: false,
showTime,
writeDay,
writeMonth,
useToday,
useTomorrowYesterday,
hideYear
});
} else {
txt += (0, _formatDate.getRelativeDateString)(date2, {
language,
showDate,
showTime,
writeDay,
writeMonth,
useToday,
useTomorrowYesterday,
hideYear
});
}
}
if (date2 && date > date2) {
// eslint-disable-next-line no-console
console.warn('[chayns components]: date2 is smaller than date');
}
const childElement = Array.isArray(children) ? children[0] : children;
const newChild = /*#__PURE__*/_react.default.cloneElement(childElement, {
style: {
display: 'inline-block'
}
}, txt);
if (noTitle) {
return newChild;
}
return /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
content: {
html: /*#__PURE__*/_react.default.createElement("div", {
style: {
whiteSpace: 'nowrap'
}
}, (0, _formatDate.getAbsoluteDateString)(date, {
language
}))
},
bindListeners: true,
removeParentSpace: true
}, newChild);
}
}
exports.default = DateInfo;
DateInfo.getAbsoluteDateString = _formatDate.getAbsoluteDateString;
DateInfo.getRelativeDateString = _formatDate.getRelativeDateString;
DateInfo.propTypes = {
/**
* The node the text is written into.
*/
children: _propTypes.default.node,
/**
* The language of the text as an
* [ISO 3166-1 alpha-2](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2)
* string.
*/
language: _propTypes.default.string,
/**
* The date that should be formatted. If a date range is supplied, this
* should be the earier date. You can supply a date as the number of
* milliseconds since 1970, ISO-8601 string or via a JavaScript
* `Date`-object,
*/
date: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.instanceOf(Date)]).isRequired,
/**
* The later date for a date range.
*/
date2: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.instanceOf(Date)]),
/**
* Wether the formatted text should show the time.
*/
showTime: _propTypes.default.bool,
/**
* Wether the formatted text should show the date.
*/
showDate: _propTypes.default.bool,
/**
* Wether the day of the week should be written out.
*/
writeDay: _propTypes.default.bool,
/**
* Determines how to write the month. If `true`, the whole name will be
* written out ("december"), if false only the number will be displayed
* ("12."), otherwise it will show the short form of the month ("dec.").
*/
writeMonth: _propTypes.default.bool,
/**
* Set this to true if the `title`-attribute should not be added to the
* children.
*/
noTitle: _propTypes.default.bool,
/**
* Wether the component should say "today" if the date matches today.
*/
useToday: _propTypes.default.bool,
/**
* Wether the component should use "tomorrow" and "yesterday".
*/
useTomorrowYesterday: _propTypes.default.bool,
/**
* When `true` the year will be omitted from the output, if `null` the year
* will be shortened ("20" for 2020). When this is false, the full year will
* be shown.
*/
hideYear: _propTypes.default.bool
};
DateInfo.defaultProps = {
children: /*#__PURE__*/_react.default.createElement("div", null),
language: undefined,
date2: null,
showTime: null,
showDate: null,
writeDay: false,
writeMonth: null,
noTitle: false,
useToday: null,
useTomorrowYesterday: null,
hideYear: false
};
DateInfo.displayName = 'DateInfo';
//# sourceMappingURL=DateInfo.js.map