Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2026-05-06 22:36:46 +02:00
Code Issues Packages Projects Releases Activity

align calculating and formatting of dates between components

Browse Source
This commit is contained in:
Sebastian Sdorra
2020-06-17 12:24:32 +02:00
parent 37bad5fd95
commit 62996d6585
9 changed files with 190 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
scm-ui/ui-components/src/DateFromNow.stories.tsx → scm-ui/ui-components/src/Date.stories.tsx
View File

@@ -24,25 +24,41 @@
import React from "react";
import DateFromNow from "./DateFromNow";
import { storiesOf } from "@storybook/react";
import DateShort from "./DateShort";
import styled from "styled-components";
const baseProps = {
timeZone: "Europe/Berlin",
baseDate: "2019-10-12T13:56:42+02:00"
};
storiesOf("DateFromNow", module).add("Default", () => (
<div>
<p>
<DateFromNow date="2009-06-30T18:30:00+02:00" {...baseProps} />
</p>
<p>
<DateFromNow date="2019-06-30T18:30:00+02:00" {...baseProps} />
</p>
<p>
<DateFromNow date="2019-10-12T13:56:40+02:00" {...baseProps} />
</p>
<p>
<DateFromNow date="2019-10-11T13:56:40+02:00" {...baseProps} />
</p>
</div>
));
const dates = [
"2009-06-30T18:30:00+02:00",
"2019-06-30T18:30:00+02:00",
"2019-10-12T13:56:40+02:00",
"2019-10-11T13:56:40+02:00"
];
const Wrapper = styled.div`
padding: 2rem;
`;
storiesOf("Date", module)
.add("Date from now", () => (
<Wrapper>
{dates.map(d => (
<p>
<DateFromNow date={d} {...baseProps} />
</p>
))}
</Wrapper>
))
.add("Short", () => (
<Wrapper>
{dates.map(d => (
<p>
<DateShort date={d} {...baseProps} />
</p>
))}
</Wrapper>
));

15
scm-ui/ui-components/src/dates.ts → scm-ui/ui-components/src/DateElement.ts
View File

@@ -22,21 +22,10 @@
* SOFTWARE.
*/
import styled from "styled-components";
import { parseISO } from "date-fns";
export type DateInput = Date | string;
export const ShortDateFormat = "yyyy-MM-dd";
export const FullDateFormat = "yyyy-MM-dd HH:mm:ss";
export const DateElement = styled.time`
const DateElement = styled.time`
border-bottom: 1px dotted rgba(219, 219, 219);
cursor: help;
`;
export const toDate = (value: DateInput): Date => {
if (value instanceof Date) {
return value;
}
return parseISO(value);
};
export default DateElement;

104
scm-ui/ui-components/src/DateFromNow.tsx
View File

@@ -21,100 +21,26 @@
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
import React from "react";
import { withTranslation, WithTranslation } from "react-i18next";
import { formatDistance, format, Locale } from "date-fns";
import { enUS, de, es } from "date-fns/locale";
import { DateInput, DateElement, FullDateFormat, toDate } from "./dates";
type LocaleMap = {
[key: string]: Locale;
};
import React, { FC } from "react";
import useDateFormatter, { DateProps } from "./useDateFormatter";
import DateElement from "./DateElement";
export const supportedLocales: LocaleMap = {
enUS,
en: enUS,
de,
es
};
type Props = WithTranslation & {
date?: DateInput;
timeZone?: string;
/**
* baseDate is the date from which the distance is calculated,
* default is the current time (new Date()). This property
* is required to keep snapshots tests green over the time on
* ci server.
*/
baseDate?: DateInput;
type Props = DateProps & {
className?: string;
};
type Options = {
addSuffix: boolean;
locale: Locale;
timeZone?: string;
};
export const chooseLocale = (language: string, languages?: string[]) => {
for (const lng of languages || []) {
const locale = supportedLocales[lng];
if (locale) {
return locale;
}
}
const locale = supportedLocales[language];
if (locale) {
return locale;
}
return enUS;
};
class DateFromNow extends React.Component<Props> {
getLocale = (): Locale => {
const { i18n } = this.props;
return chooseLocale(i18n.language, i18n.languages);
};
createOptions = () => {
const { timeZone } = this.props;
const options: Options = {
addSuffix: true,
locale: this.getLocale()
};
if (timeZone) {
options.timeZone = timeZone;
}
return options;
};
getBaseDate = () => {
const { baseDate } = this.props;
if (baseDate) {
return toDate(baseDate);
}
return new Date();
};
render() {
const { date, className } = this.props;
if (date) {
const isoDate = toDate(date);
const options = this.createOptions();
const distance = formatDistance(isoDate, this.getBaseDate(), options);
const formatted = format(isoDate, FullDateFormat, options);
return (
<DateElement className={className} title={formatted}>
{distance}
</DateElement>
);
}
const DateFromNow: FC<Props> = ({ className, ...dateProps }) => {
const formatter = useDateFormatter(dateProps);
if (!formatter) {
return null;
}
}
export default withTranslation()(DateFromNow);
return (
<DateElement className={className} title={formatter.formatFull()}>
{formatter.formatDistance()}
</DateElement>
);
};
export default DateFromNow;

21
scm-ui/ui-components/src/DateShort.tsx
View File

@@ -21,23 +21,24 @@
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
import React, { FC } from "react";
import { format } from "date-fns";
import { toDate, ShortDateFormat, FullDateFormat, DateElement } from "./dates";
type Props = {
value?: Date | string;
import React, { FC } from "react";
import useDateFormatter, { DateProps } from "./useDateFormatter";
import DateElement from "./DateElement";
type Props = DateProps & {
className?: string;
};
const DateShort: FC<Props> = ({ value, className }) => {
if (!value) {
const DateShort: FC<Props> = ({ className, ...dateProps }) => {
const formatter = useDateFormatter(dateProps);
if (!formatter) {
return null;
}
const date = toDate(value);
return (
<DateElement className={className} title={format(date, FullDateFormat)}>
{format(date, ShortDateFormat)}
<DateElement className={className} title={formatter.formatFull()}>
{formatter.formatShort()}
</DateElement>
);
};

2
scm-ui/ui-components/src/repos/annotate/Annotate.tsx
View File

@@ -28,7 +28,7 @@ import { Repository, AnnotatedSource, AnnotatedLine } from "@scm-manager/ui-type
// @ts-ignore
import { LightAsync as ReactSyntaxHighlighter, createElement } from "react-syntax-highlighter";
import { arduinoLight } from "react-syntax-highlighter/dist/cjs/styles/hljs";
import { DateInput } from "../../dates";
import { DateInput } from "../../useDateFormatter";
import Popover from "./Popover";
import AnnotateLine from "./AnnotateLine";
import { Action } from "./actions";

2
scm-ui/ui-components/src/repos/annotate/AnnotateLine.tsx
View File

@@ -134,7 +134,7 @@ const AnnotateLine: FC<Props> = ({ annotation, showAnnotation, dispatch, nr, chi
{annotation.author.name}
</Author>{" "}
<When>
<DateShort value={annotation.when} />
<DateShort date={annotation.when} />
</When>{" "}
</Metadata>
<LineNumber>{nr}</LineNumber> <LineElement>{children}</LineElement>

2
scm-ui/ui-components/src/repos/annotate/Popover.tsx
View File

@@ -27,7 +27,7 @@ import styled from "styled-components";
import { Link } from "react-router-dom";
import DateFromNow from "../../DateFromNow";
import { SingleContributor } from "../changesets";
import { DateInput } from "../../dates";
import { DateInput } from "../../useDateFormatter";
import { Repository, AnnotatedLine } from "@scm-manager/ui-types";
import AuthorImage from "./AuthorImage";
import { Action } from "./actions";

2
scm-ui/ui-components/src/DateFromNow.test.ts → scm-ui/ui-components/src/useDateFormatter.test.ts
View File

@@ -22,7 +22,7 @@
* SOFTWARE.
*/
import { chooseLocale, supportedLocales } from "./DateFromNow";
import { chooseLocale, supportedLocales } from "./useDateFormatter";
describe("test choose locale", () => {
it("should choose de", () => {

126
scm-ui/ui-components/src/useDateFormatter.ts Normal file
View File

@@ -0,0 +1,126 @@
/*
* MIT License
*
* Copyright (c) 2020-present Cloudogu GmbH and Contributors
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
import { useTranslation } from "react-i18next";
import { enUS, de, es } from "date-fns/locale";
import { formatDistance, format, Locale, parseISO } from "date-fns";
type LocaleMap = {
[key: string]: Locale;
};
export const supportedLocales: LocaleMap = {
enUS,
en: enUS,
de,
es
};
type Options = {
addSuffix: boolean;
locale: Locale;
timeZone?: string;
};
export const chooseLocale = (language: string, languages?: string[]) => {
for (const lng of languages || []) {
const locale = supportedLocales[lng];
if (locale) {
return locale;
}
}
const locale = supportedLocales[language];
if (locale) {
return locale;
}
return enUS;
};
export type DateInput = Date | string;
export type DateProps = {
date?: DateInput;
timeZone?: string;
/**
* baseDate is the date from which the distance is calculated,
* default is the current time (new Date()). This property
* is required to keep snapshots tests green over the time on
* ci server.
*/
baseDate?: DateInput;
};
const createOptions = (locale: Locale, timeZone?: string) => {
const options: Options = {
addSuffix: true,
locale
};
if (timeZone) {
options.timeZone = timeZone;
}
return options;
};
const createBaseDate = (baseDate?: DateInput) => {
if (baseDate) {
return toDate(baseDate);
}
return new Date();
};
const toDate = (value: DateInput): Date => {
if (value instanceof Date) {
return value;
}
return parseISO(value);
};
const useDateFormatter = ({ date, baseDate, timeZone }: DateProps) => {
const { i18n } = useTranslation();
if (!date) {
return null;
}
const isoDate = toDate(date);
const base = createBaseDate(baseDate);
const locale = chooseLocale(i18n.language, i18n.languages);
const options = createOptions(locale, timeZone);
return {
formatShort() {
return format(isoDate, "yyyy-MM-dd", options);
},
formatFull() {
return format(isoDate, "yyyy-MM-dd HH:mm:ss", options);
},
formatDistance() {
return formatDistance(isoDate, base, options);
}
};
};
export default useDateFormatter;