-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #60 from skbkontur/replace-moment-with-date-fns
Replace moment with date fns
- Loading branch information
Showing
11 changed files
with
162 additions
and
40 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
107 changes: 107 additions & 0 deletions
107
db-viewer-ui/src/Components/DateTimeRangePicker/DateTimePickerWithTimeZone.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,107 @@ | ||
| import { Select } from "@skbkontur/react-ui"; | ||
| import React from "react"; | ||
|
|
||
| import { Time } from "../../Domain/DataTypes/Time"; | ||
| import { DateUtils } from "../../Domain/Utils/DateUtils"; | ||
|
|
||
| import { DatePicker } from "./DatePicker"; | ||
| import { jsStyles } from "./DateTimePicker.styles"; | ||
| import { TimePicker } from "./TimePicker"; | ||
|
|
||
| interface DateTimePickerWithTimeZone { | ||
| error?: boolean; | ||
| defaultTime: Time; | ||
| value: Nullable<string>; | ||
| onChange: (value: Nullable<string>) => void; | ||
| disabled?: boolean; | ||
| timeZoneEditable?: boolean; | ||
| } | ||
|
|
||
| export function DateTimePickerWithTimeZone({ | ||
| error, | ||
| defaultTime, | ||
| value, | ||
| onChange, | ||
| disabled, | ||
| timeZoneEditable, | ||
| }: DateTimePickerWithTimeZone): JSX.Element { | ||
| const [time, setTime] = React.useState<Nullable<string>>(null); | ||
| const [offset, setOffset] = React.useState<Nullable<string>>(null); | ||
| const [date, setDate] = React.useState<Nullable<Date>>(null); | ||
| React.useEffect(() => loadState(value), [value]); | ||
| React.useEffect(() => handleDateTimeChange(date, time, offset), [date, time, offset]); | ||
|
|
||
| const handleDateTimeChange = ( | ||
| newDate: Nullable<Date>, | ||
| newTime: Nullable<Time>, | ||
| newOffset: Nullable<string> | ||
| ): void => { | ||
| if (!newDate) { | ||
| onChange(null); | ||
| return; | ||
| } | ||
| const date = DateUtils.convertDateToString(newDate, null, "yyyy-MM-dd"); | ||
| const newDateTime = `${date}T${newTime ?? defaultTime}${newOffset ?? ""}`; | ||
| onChange(newDateTime); | ||
| }; | ||
|
|
||
| const loadState = (dateStr: Nullable<string>): void => { | ||
| if (!dateStr) { | ||
| return; | ||
| } | ||
| const timeOffset = getTimeZoneString(dateStr); | ||
| setOffset(timeOffset); | ||
| const dateTimeWithoutTimezone = timeOffset ? dateStr.slice(0, -timeOffset.length) : dateStr; | ||
| setDate(new Date(dateTimeWithoutTimezone)); | ||
| setTime(DateUtils.convertDateToString(dateTimeWithoutTimezone, null, "HH:mm:ss.SSS")); | ||
| }; | ||
|
|
||
| const getTimeZoneString = (date: string): Nullable<string> => { | ||
| const timezoneRegex = /.*T.*(Z|[+-].*)/i; | ||
| const matches = date.match(timezoneRegex); | ||
| if (!matches || matches.length < 2) { | ||
| return null; | ||
| } | ||
| return matches[1]; | ||
| }; | ||
|
|
||
| return ( | ||
| <span> | ||
| <span className={jsStyles.dateRangeItem()}> | ||
| <DatePicker | ||
| data-tid="Date" | ||
| value={date} | ||
| defaultTime={time || defaultTime} | ||
| onChange={newDate => setDate(newDate)} | ||
| error={error} | ||
| disabled={disabled} | ||
| width={110} | ||
| /> | ||
| </span> | ||
| <span className={jsStyles.dateRangeItem()}> | ||
| <TimePicker | ||
| data-tid="Time" | ||
| value={time === defaultTime ? null : time} | ||
| error={error} | ||
| defaultTime={defaultTime} | ||
| disabled={disabled || !date} | ||
| onChange={(_, newTime) => setTime(newTime)} | ||
| useSeconds | ||
| /> | ||
| </span> | ||
| <span className={jsStyles.dateRangeItem()}> | ||
| {timeZoneEditable ? ( | ||
| <Select<string> | ||
| data-tid="TimeZoneSelect" | ||
| defaultValue="UTC" | ||
| value={offset ? "UTC" : "local"} | ||
| items={["UTC", "local"]} | ||
| onValueChange={v => setOffset(v === "local" ? null : "Z")} | ||
| /> | ||
| ) : ( | ||
| <span data-tid="TimeOffsetLabel">{offset}</span> | ||
| )} | ||
| </span> | ||
| </span> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,23 +1,29 @@ | ||
| import moment from "moment"; | ||
| import { addMinutes, format, parse } from "date-fns"; | ||
|
|
||
| import { RussianDateFormat } from "../DataTypes/DateTimeRange"; | ||
|
|
||
| export class DateUtils { | ||
| private static readonly datePickerFormat: RussianDateFormat = "DD.MM.YYYY"; | ||
| private static readonly datePickerFormat: RussianDateFormat = "dd.MM.yyyy"; | ||
|
|
||
| public static isCorrectTime(time: string): boolean { | ||
| return Boolean(time.match(/^([01]?[0-9]|2[0-3]):[0-5][0-9]/)); | ||
| } | ||
|
|
||
| public static convertDateToString( | ||
| date: Date | string, | ||
| timeZone: number, | ||
| format: string = this.datePickerFormat | ||
| timeZone: number | null, | ||
| dateFormat: string = this.datePickerFormat | ||
| ): string { | ||
| return moment.utc(date).utcOffset(timeZone).format(format); | ||
| const dateDate = timeZone == null ? new Date(date) : this.toTimeZone(new Date(date), timeZone); | ||
| return format(dateDate, dateFormat); | ||
| } | ||
|
|
||
| public static convertStringToDate(date: RussianDateFormat): Date { | ||
| return moment(date, this.datePickerFormat).toDate(); | ||
| return parse(date, this.datePickerFormat, new Date()); | ||
| } | ||
|
|
||
| public static toTimeZone(date: Date | string, timeZoneOffsetInMinutes: number): Date { | ||
| const dateDate = new Date(date); | ||
| return addMinutes(dateDate, dateDate.getTimezoneOffset() + timeZoneOffsetInMinutes); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters