@parkassist/pa-ui-library
Version:
INX Platform elements
77 lines • 2.56 kB
JavaScript
var __rest = this && this.__rest || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
}
return t;
};
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React from "react";
import Clock from "react-live-clock";
import { Column } from "../Flex";
import MediaQuery from "react-responsive";
import { TriangleWrapper, DateAndTimeField, SectionTitleWrapper, TitleWrapper } from "./styled";
import { getCompleteDateFormat } from "./utils";
export const Title = ({
children
}) => _jsxs(TitleWrapper, {
children: [_jsx(TriangleWrapper, {
className: "section-title--triangle",
children: "\u25B6"
}), _jsx(Column, {
style: {
textTransform: "uppercase",
justifyContent: "center"
},
children: children ? children : window.location.href.split("?").shift().split("/").pop().replace(/-/g, " ")
})]
});
export const DateTimeWeather = ({
currentSite,
className,
showDateTime
}) => {
var _a;
const format = getCompleteDateFormat(currentSite);
const timezone = currentSite.timezoneId || ((_a = currentSite.timezone) === null || _a === void 0 ? void 0 : _a.name);
return _jsx(_Fragment, {
children: showDateTime && timezone && _jsx(DateAndTimeField, {
className: className,
children: _jsx(Clock, {
format: format,
timezone: timezone,
ticking: true
})
})
});
};
const SectionTitleComponent = _a => {
var {
title,
titleComponent,
currentSite,
className,
showDateTime
} = _a,
props = __rest(_a, ["title", "titleComponent", "currentSite", "className", "showDateTime"]);
const hasTitle = Boolean(title || titleComponent);
return _jsx(MediaQuery, {
minWidth: 500,
children: _jsxs(SectionTitleWrapper, Object.assign({
style: {
justifyContent: hasTitle ? "space-between" : "flex-end"
},
className: className
}, props, {
children: [title ? _jsx(Title, {
children: title
}) : titleComponent, currentSite && _jsx(DateTimeWeather, {
showDateTime: showDateTime,
className: "section-title--time",
currentSite: currentSite
})]
}))
});
};
export default SectionTitleComponent;