playbook_ui 12.28.0.pre.alpha.PLAY814removemomentjs871 → 12.28.0.pre.alpha.PLAY863multilevelv2876

Sign up to get free protection for your applications and to get access to all the features.
Files changed (26) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_date/_date.tsx +8 -7
  3. data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.tsx +31 -45
  4. data/app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.tsx +3 -5
  5. data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.tsx +21 -24
  6. data/app/pb_kits/playbook/pb_date_time/_date_time.tsx +1 -1
  7. data/app/pb_kits/playbook/pb_date_time/dateTime.test.js +1 -1
  8. data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx +2 -2
  9. data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.test.js +1 -1
  10. data/app/pb_kits/playbook/pb_date_year_stacked/_date_year_stacked.tsx +8 -6
  11. data/app/pb_kits/playbook/pb_kit/dateTime.ts +67 -139
  12. data/app/pb_kits/playbook/pb_label_value/_label_value.tsx +31 -52
  13. data/app/pb_kits/playbook/pb_logistic/_logistic.jsx +120 -0
  14. data/app/pb_kits/playbook/pb_message/_message.tsx +25 -25
  15. data/app/pb_kits/playbook/pb_multi_level_select/_helper_functions.tsx +56 -27
  16. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.scss +1 -1
  17. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +10 -27
  18. data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb +4 -0
  19. data/app/pb_kits/playbook/pb_time/_time.tsx +11 -9
  20. data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.tsx +49 -46
  21. data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.tsx +6 -4
  22. data/app/pb_kits/playbook/pb_timestamp/_timestamp.tsx +10 -10
  23. data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.tsx +11 -8
  24. data/dist/playbook-rails.js +6 -6
  25. data/lib/playbook/version.rb +1 -1
  26. metadata +2 -1
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 6bff4ae5eea63203df312bfe5084059ccbf7c03b00e21191e8febfdadef69e40
4
- data.tar.gz: 4b2d45e698f7101b05145fe30247ceb58c007e91e9e8d239ce2ee81c9715bc99
3
+ metadata.gz: 55221ced6a088f8d7167b9180d791f0f02b6b911d90b0d756ac066d012b3f531
4
+ data.tar.gz: fde86de0417d16dc0a83c3031a8f6042169ae175d06782ea2b8f89a203a7924b
5
5
  SHA512:
6
- metadata.gz: '082571f8a9154aae27eea5c8087db5c24d1b9439cdbe8f699a5a9c8fdf72ea8d9ed8840595d4160500586ccbe73a6720ef3d221a464e971f825fff22b78abcc9'
7
- data.tar.gz: 861ab41ccc20069e20fba759b72f8ea0d04cef37aa843ffa8ec4df6725b07a5a76ed10f90120dd3e90e1074cd86b53fa0c196a50a507b8aaa5f18885e79d6ea6
6
+ metadata.gz: 5747d799fc1f11a2183825606fc53f87b0a8bf1de3ff9ce1410dcd54746784f5486d465b14a7fa4f33390a54c518c8037461aac104b615c19fe59373c93ceff6
7
+ data.tar.gz: 5ce8f70fc8c1790e384632c85114bb2d893fc0453821f4d3c5dbf35af241967103ce83ebbae3bf6d64db5d6f34fe70fd35595f11ef11054c1cfbbaaf61eb7167
data/app/pb_kits/playbook/pb_date/_date.tsx CHANGED
@@ -1,9 +1,9 @@
1
1
  import React from "react";
2
2
  import classnames from "classnames";
3
3
 
4
+ import DateTime from "../pb_kit/dateTime";
4
5
  import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
5
6
  import { globalProps } from "../utilities/globalProps";
6
- import DateTime from '../pb_kit/dateTime';
7
7
 
8
8
  import Body from "../pb_body/_body";
9
9
  import Caption from "../pb_caption/_caption";
@@ -20,7 +20,7 @@ type PbDateProps = {
20
20
  showIcon?: boolean;
21
21
  size?: "sm" | "md" | "lg";
22
22
  unstyled?: boolean;
23
- value: Date;
23
+ value: string | Date;
24
24
  };
25
25
 
26
26
  const PbDate = (props: PbDateProps) => {
@@ -37,11 +37,12 @@ const PbDate = (props: PbDateProps) => {
37
37
  value,
38
38
  } = props;
39
39
 
40
- const weekday = DateTime.toWeekday(value);
41
- const month = DateTime.toMonth(value);
42
- const day = DateTime.toDay(value);
43
- const year = DateTime.toYear(value);
44
- const currentYear = new Date().getFullYear();
40
+ const dateTimestamp = new DateTime({ value: value });
41
+ const weekday = dateTimestamp.toWeekday();
42
+ const month = dateTimestamp.toMonth();
43
+ const day = dateTimestamp.toDay();
44
+ const year = dateTimestamp.toYear();
45
+ const currentYear = new Date().getFullYear().toString();
45
46
 
46
47
  const ariaProps = buildAriaProps(aria);
47
48
  const dataProps = buildDataProps(data);
data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.tsx CHANGED
@@ -3,7 +3,7 @@ import classnames from "classnames";
3
3
 
4
4
  import { globalProps } from "../utilities/globalProps";
5
5
  import { buildCss, buildDataProps } from "../utilities/props";
6
- import DateTime from '../pb_kit/dateTime';
6
+ import DateTime from "../pb_kit/dateTime";
7
7
 
8
8
  import Body from "../pb_body/_body";
9
9
  import Caption from "../pb_caption/_caption";
@@ -21,16 +21,18 @@ type DateRangeInlineProps = {
21
21
  endDate?: Date;
22
22
  };
23
23
 
24
- const dateTimestamp = (dateValue: Date, includeYear: boolean) => {
24
+ const dateTimestamp = (dateValue: Date | string, includeYear: boolean) => {
25
+ const date = new DateTime({ value: dateValue });
25
26
  if (includeYear) {
26
- return `${DateTime.toMonth(dateValue)} ${DateTime.toDay(dateValue)}, ${DateTime.toYear(dateValue)}`;
27
+ return `${date.toMonth()} ${date.toDay()}, ${date.toYear()}`;
27
28
  } else {
28
- return `${DateTime.toMonth(dateValue)} ${DateTime.toDay(dateValue)}`;
29
+ return `${date.toMonth()} ${date.toDay()}`;
29
30
  }
30
31
  };
31
32
 
32
- const dateTimeIso = (dateValue: Date) => {
33
- return DateTime.toIso(dateValue);
33
+ const dateTimeIso = (dateValue: Date | string) => {
34
+ const date = new DateTime({ value: dateValue });
35
+ return date.toIso();
34
36
  };
35
37
 
36
38
  const DateRangeInline = (props: DateRangeInlineProps) => {
@@ -50,17 +52,14 @@ const DateRangeInline = (props: DateRangeInlineProps) => {
50
52
  <>
51
53
  {icon && (
52
54
  <>
53
- <Body color="light"
54
- key={Math.random()}
55
- tag="span"
56
- >
55
+ <Body color="light" key={Math.random()} tag="span">
57
56
  <Icon
58
- className="pb_date_range_inline_icon"
59
- dark={dark}
60
- fixedWidth
61
- icon="calendar-alt"
62
- size={size}
63
- tag="span"
57
+ className="pb_date_range_inline_icon"
58
+ dark={dark}
59
+ fixedWidth
60
+ icon="calendar-alt"
61
+ size={size}
62
+ tag="span"
64
63
  />
65
64
  </Body>
66
65
  </>
@@ -79,7 +78,7 @@ const DateRangeInline = (props: DateRangeInlineProps) => {
79
78
 
80
79
  const dateRangeClasses = buildCss("pb_date_range_inline_kit", align);
81
80
  const dataProps = buildDataProps(data)
82
- const renderTime = (date: Date) => {
81
+ const renderTime = (date: Date | string) => {
83
82
  return (
84
83
  <time dateTime={dateTimeIso(date)}>
85
84
  {dateInCurrentYear() ? (
@@ -93,30 +92,24 @@ const DateRangeInline = (props: DateRangeInlineProps) => {
93
92
 
94
93
  return (
95
94
  <div
96
- {...dataProps}
97
- className={classnames(dateRangeClasses, globalProps(props), className)}
95
+ {...dataProps}
96
+ className={classnames(dateRangeClasses, globalProps(props), className)}
98
97
  >
99
98
  <div className="pb_date_range_inline_wrapper">
100
99
  {size == "xs" && (
101
100
  <>
102
101
  {iconContent()}
103
- <Caption dark={dark}
104
- tag="span"
105
- >
102
+ <Caption dark={dark} tag="span">
106
103
  {renderTime(startDate)}
107
104
  </Caption>
108
- <Caption dark={dark}
109
- tag="span"
110
- >
105
+ <Caption dark={dark} tag="span">
111
106
  <Icon
112
- className="pb_date_range_inline_arrow"
113
- fixedWidth
114
- icon="long-arrow-right"
107
+ className="pb_date_range_inline_arrow"
108
+ fixedWidth
109
+ icon="long-arrow-right"
115
110
  />
116
111
  </Caption>
117
- <Caption dark={dark}
118
- tag="span"
119
- >
112
+ <Caption dark={dark} tag="span">
120
113
  {renderTime(endDate)}
121
114
  </Caption>
122
115
  </>
@@ -125,25 +118,18 @@ const DateRangeInline = (props: DateRangeInlineProps) => {
125
118
  {size == "sm" && (
126
119
  <>
127
120
  {iconContent()}
128
- <Body dark={dark}
129
- tag="span"
130
- >
121
+ <Body dark={dark} tag="span">
131
122
  {renderTime(startDate)}
132
123
  </Body>
133
- <Body color="light"
134
- dark={dark}
135
- tag="span"
136
- >
124
+ <Body color="light" dark={dark} tag="span">
137
125
  <Icon
138
- className="pb_date_range_inline_arrow"
139
- dark={dark}
140
- fixedWidth
141
- icon="long-arrow-right"
126
+ className="pb_date_range_inline_arrow"
127
+ dark={dark}
128
+ fixedWidth
129
+ icon="long-arrow-right"
142
130
  />
143
131
  </Body>
144
- <Body dark={dark}
145
- tag="span"
146
- >
132
+ <Body dark={dark} tag="span">
147
133
  {renderTime(endDate)}
148
134
  </Body>
149
135
  </>
data/app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.tsx CHANGED
@@ -14,9 +14,9 @@ type DateRangeStackedProps = {
14
14
  className?: string | string[],
15
15
  data?: string,
16
16
  dark?: boolean,
17
- endDate: Date,
17
+ endDate: string,
18
18
  id?: string,
19
- startDate: Date,
19
+ startDate: string,
20
20
  }
21
21
 
22
22
  const DateRangeStacked = (props: DateRangeStackedProps) => {
@@ -29,9 +29,7 @@ const DateRangeStacked = (props: DateRangeStackedProps) => {
29
29
  const dataProps = buildDataProps(data)
30
30
 
31
31
  return (
32
- <div {...dataProps}
33
- className={css}
34
- >
32
+ <div {...dataProps} className={css}>
35
33
  <Flex vertical="center">
36
34
  <FlexItem>
37
35
  <DateYearStacked
data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.tsx CHANGED
@@ -1,9 +1,9 @@
1
1
  import React from "react";
2
2
 
3
3
  import classnames from "classnames";
4
+ import DateTime from "../pb_kit/dateTime";
4
5
  import { buildCss, buildDataProps } from "../utilities/props";
5
6
  import { globalProps } from "../utilities/globalProps";
6
- import DateTime from '../pb_kit/dateTime';
7
7
 
8
8
  import Caption from "../pb_caption/_caption";
9
9
  import Title from "../pb_title/_title";
@@ -14,7 +14,7 @@ type DateStackedProps = {
14
14
  className?: string | string[];
15
15
  dark?: boolean;
16
16
  data?: string;
17
- date: Date;
17
+ date: string | Date;
18
18
  size?: "sm" | "md";
19
19
  id?: string;
20
20
  reverse?: boolean;
@@ -45,42 +45,39 @@ const DateStacked = (props: DateStackedProps) => {
45
45
  className
46
46
  );
47
47
 
48
- const currentYear = new Date().getFullYear()
49
- const inputYear = DateTime.toYear(date);
48
+ const currentYear = new Date().getFullYear().toString();
49
+ const dateTimestamp = new DateTime({ value: date });
50
+ const inputYear = dateTimestamp.toYear().toString();
50
51
  const dataProps = buildDataProps(data)
51
52
 
52
53
  return (
53
54
  <>
54
55
  {bold == false ? (
55
- <div {...dataProps}
56
- className={classes}
57
- >
56
+ <div {...dataProps} className={classes}>
58
57
  <div className="pb_date_stacked_day_month">
59
- <Caption text={DateTime.toMonth(date).toUpperCase()} />
58
+ <Caption text={dateTimestamp.toMonth().toUpperCase()} />
60
59
  <Title
61
- dark={dark}
62
- size={sizes[size]}
63
- text={DateTime.toDay(date).toString()}
60
+ dark={dark}
61
+ size={sizes[size]}
62
+ text={dateTimestamp.toDay()}
64
63
  />
65
64
  </div>
66
65
  {currentYear != inputYear && <Caption size="xs">{inputYear}</Caption>}
67
66
  </div>
68
67
  ) : (
69
- <div {...dataProps}
70
- className={classes}
71
- >
68
+ <div {...dataProps} className={classes}>
72
69
  <div className="pb_date_stacked_day_month">
73
- <Title
74
- bold
75
- dark={dark}
76
- size="4"
77
- text={DateTime.toMonth(date)}
70
+ <Title
71
+ bold
72
+ dark={dark}
73
+ size="4"
74
+ text={dateTimestamp.toMonth()}
78
75
  />
79
- <Title
80
- bold
81
- dark={dark}
82
- size="4"
83
- text={DateTime.toDay(date).toString()}
76
+ <Title
77
+ bold
78
+ dark={dark}
79
+ size="4"
80
+ text={dateTimestamp.toDay()}
84
81
  />
85
82
  {currentYear != inputYear && <Title size="4">{inputYear}</Title>}
86
83
  </div>
data/app/pb_kits/playbook/pb_date_time/_date_time.tsx CHANGED
@@ -13,7 +13,7 @@ type DateTimeProps = {
13
13
  aria?: { [key: string]: string; },
14
14
  className?: string,
15
15
  data?: { [key: string]: string; },
16
- datetime: Date,
16
+ datetime: string,
17
17
  id?: string,
18
18
  size?: "sm" | "md",
19
19
  showDayOfWeek: boolean,
data/app/pb_kits/playbook/pb_date_time/dateTime.test.js CHANGED
@@ -89,7 +89,7 @@ describe('DateTime Kit', () => {
89
89
  const kit = screen.getByTestId(testId)
90
90
  const text = kit.querySelector('.pb_time_kit_md.ml_sm')
91
91
 
92
- expect(text.textContent).toEqual('2:00p GMT+9')
92
+ expect(text.textContent).toEqual('2:00p JST')
93
93
  })
94
94
  test('renders DatePicker size', () => {
95
95
  render(
data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx CHANGED
@@ -12,8 +12,8 @@ import DateStacked from '../pb_date_stacked/_date_stacked'
12
12
 
13
13
  type DateTimeStackedProps = {
14
14
  id?: string,
15
- date: Date,
16
- datetime: Date,
15
+ date: string,
16
+ datetime: string,
17
17
  dark: boolean,
18
18
  timeZone?: string,
19
19
  }
data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.test.js CHANGED
@@ -34,7 +34,7 @@ test('renders time in default timezone', () => {
34
34
  test('renders time in timezone', () => {
35
35
  props.timeZone = 'Asia/Tokyo'
36
36
  const kit = renderKit(DateTimeStacked, props)
37
- expect(kit).toHaveTextContent(`${monthDayYear}2:00aGMT+9`)
37
+ expect(kit).toHaveTextContent(`${monthDayYear}2:00aJST`)
38
38
  })
39
39
 
40
40
  test('renders time in timezone', () => {
data/app/pb_kits/playbook/pb_date_year_stacked/_date_year_stacked.tsx CHANGED
@@ -1,9 +1,9 @@
1
1
  import React from 'react'
2
2
  import classnames from 'classnames'
3
3
 
4
+ import DateTime from '../pb_kit/dateTime'
4
5
  import { buildCss, buildDataProps } from '../utilities/props'
5
6
  import { globalProps } from '../utilities/globalProps'
6
- import DateTime from '../pb_kit/dateTime';
7
7
 
8
8
  import Body from '../pb_body/_body'
9
9
  import Title from '../pb_title/_title'
@@ -13,12 +13,13 @@ type DateYearStackedProps = {
13
13
  className?: string | string[],
14
14
  dark?: boolean,
15
15
  data?: string,
16
- date: Date,
16
+ date: string,
17
17
  id?: string,
18
18
  }
19
19
 
20
20
  const DateYearStacked = (props: DateYearStackedProps) => {
21
21
  const { align = 'left', className, dark = false, date, data={} } = props
22
+ const dateTimestamp = new DateTime({ value: date })
22
23
  const css = classnames(
23
24
  buildCss('pb_date_year_stacked', align),
24
25
  globalProps(props),
@@ -28,14 +29,15 @@ const DateYearStacked = (props: DateYearStackedProps) => {
28
29
 
29
30
  return (
30
31
  <div {...dataProps}
31
- className={css}
32
- >
32
+ className={css}>
33
33
  <Title
34
34
  dark={dark}
35
35
  size={4}
36
- text={`${DateTime.toDay(date)} ${DateTime.toMonth(date).toUpperCase()}`}
36
+ text={`${dateTimestamp.toDay()} ${dateTimestamp
37
+ .toMonth()
38
+ .toUpperCase()}`}
37
39
  />
38
- <Body color="light">{DateTime.toYear(date)}</Body>
40
+ <Body color="light">{dateTimestamp.toYear()}</Body>
39
41
  </div>
40
42
  )
41
43
  }
data/app/pb_kits/playbook/pb_kit/dateTime.ts CHANGED
@@ -1,162 +1,90 @@
1
+
2
+ import moment, { Moment } from 'moment'
3
+ import 'moment-strftime'
4
+ import 'moment-timezone'
5
+
6
+ type DateTimeType = {
7
+ value: string | Date,
8
+ zone?: string,
9
+ }
10
+
1
11
  const ABBR_DAYS = ['SU', 'M', 'T', 'W', 'TH', 'F', 'S']
2
12
 
3
- const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
13
+ export default class DateTime {
14
+ value: Moment & any
15
+ constructor({ value, zone = 'America/New_York' }: DateTimeType) {
16
+ this.value = this.convertToTimestampZone(value, zone)
17
+ }
4
18
 
5
- const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
19
+ convertToTimestampZone(value: string | Date, zone: string) {
20
+ return moment(value).tz(zone)
21
+ }
6
22
 
7
- export const toMinute = (newDate: Date, timeZone?: string): string => {
8
- const date = new Date(newDate)
9
- if (timeZone) {
10
- return date.toLocaleTimeString(undefined, {timeZone, hour: "2-digit", minute: "2-digit"}).slice(3, 5);
11
- } else {
12
- return date.toLocaleTimeString(undefined, {hour: "2-digit", minute: "2-digit"}).slice(3, 5);
23
+ convertToTimezone() {
24
+ return this.value.strftime('%Z')
13
25
  }
14
- }
15
26
 
16
- export const toHour = (newDate: Date, timeZone?: string): string => {
17
- const date = new Date(newDate)
18
- if (timeZone) {
19
- return date.toLocaleTimeString(undefined, {timeZone, hour: "numeric"}).split(' ')[0];
20
- } else {
21
- return date.toLocaleTimeString(undefined, {hour: "numeric"}).split(' ')[0];
27
+ toCustomFormat(format = '%-m/%-d') {
28
+ return this.value.strftime(format)
22
29
  }
23
- }
24
30
 
25
- export const toDay = (newDate: Date, timeZone?: string): number => {
26
- if (timeZone) {
27
- const date = new Date(newDate.toLocaleString(undefined, { timeZone }));
28
- return date.getUTCDate()
29
- } else {
30
- const date = new Date(newDate)
31
- return date.getUTCDate()
32
- }
33
- }
31
+ toYear() {
32
+ return this.value.strftime('%Y')
33
+ }
34
34
 
35
- export const toDayAbbr = (newDate: Date): string => {
36
- const date = new Date(newDate)
37
- return ABBR_DAYS[date.getUTCDay()]
38
- }
35
+ toMonth() {
36
+ return this.value.strftime('%b')
37
+ }
39
38
 
40
- export const toWeekday = (newDate: Date): string => {
41
- const date = new Date(newDate)
42
- return days[date.getUTCDay()]
43
- }
39
+ toMonthNum() {
40
+ return this.value.strftime('%-m')
41
+ }
44
42
 
45
- export const toMonth = (newDate: Date, timeZone?: string): string => {
46
- if (timeZone) {
47
- const date = new Date(newDate.toLocaleString(undefined, { timeZone }));
48
- return months[date.getUTCMonth()]
49
- } else {
50
- const date = new Date(newDate)
51
- return months[date.getUTCMonth()]
52
- }
53
- }
43
+ toMonthFull() {
44
+ return this.value.strftime('%B')
45
+ }
54
46
 
55
- export const toMonthNum = (newDate: Date): number => {
56
- const date = new Date(newDate)
57
- return date.getUTCMonth() +1
58
- }
47
+ toDay() {
48
+ return this.value.strftime('%e')
49
+ }
59
50
 
60
- export const toYear = (newDate: Date, timeZone?: string): number => {
61
- if (timeZone) {
62
- const date = new Date(newDate.toLocaleString(undefined, { timeZone }));
63
- return date.getUTCFullYear()
64
- } else {
65
- const date = new Date(newDate)
66
- return date.getUTCFullYear()
67
- }
68
- }
51
+ toDayAbbr() {
52
+ return ABBR_DAYS[this.value.day()]
53
+ }
69
54
 
70
- export const toTime = (newDate: Date, timeZone?: string): string => {
71
- const date = new Date(newDate)
72
- if (timeZone) {
73
- return date.toLocaleTimeString(undefined, {timeZone, timeStyle: "short"}).split(' ')[0];
74
- } else {
75
- return date.toLocaleTimeString(undefined, {timeStyle: "short"}).split(' ')[0];
55
+ toWeekday() {
56
+ return this.value.strftime('%a')
76
57
  }
77
- }
78
58
 
79
- export const toMeridiem = (newDate: Date, timeZone?: string): string => {
80
- const date = new Date(newDate)
81
- if (timeZone) {
82
- return date.toLocaleString(undefined, {timeZone, hour12: true }).slice(-2).charAt(0).toLocaleLowerCase();
83
- } else {
84
- return date.toLocaleString(undefined, {hour12: true }).slice(-2).charAt(0).toLocaleLowerCase();
85
- }
86
- }
59
+ toHour() {
60
+ return this.value.strftime('%l')
61
+ }
87
62
 
88
- export const toTimeZone = (newDate: Date, timeZone?: string): string => {
89
- const date = new Date(newDate)
90
- if (timeZone) {
91
- return date.toLocaleString(undefined, {timeZone, timeZoneName: "short"}).split(' ')[3];
92
- } else {
93
- return date.toLocaleString(undefined, {timeZoneName: "short"}).split(' ')[3];
94
- }
95
- }
63
+ toMinute() {
64
+ return this.value.strftime('%M')
65
+ }
96
66
 
97
- export const toTimeWithMeridiem = (newDate: Date, timeZone: string): string => {
98
- const date = new Date(newDate)
99
- return `${toTime(date, timeZone)}${toMeridiem(date, timeZone)}`;
100
- }
67
+ toMeridian() {
68
+ return this.value.strftime('%P')[0]
69
+ }
101
70
 
102
- export const toIso = (newDate: Date): string => {
103
- const date = new Date(newDate)
104
- return date.toISOString()
105
- }
71
+ toIso() {
72
+ return this.value.toISOString()
73
+ }
106
74
 
107
- export const fromNow = (newDate: Date): string => {
108
-
109
- const startDate = new Date(newDate).getTime()
110
- const endDate = new Date().getTime()
111
- const elapsedTime = endDate - startDate
112
- let elapsedTimeString = `${Math.round(elapsedTime / (365.25 * 24 * 60 * 60 * 1000))} years ago.`; // 730+ days
113
-
114
- const elapsedTimeData = [
115
- { min: 0, max: 44999, value: "a few seconds ago" }, // 0-44 seconds
116
- { min: 45000, max: 89999, value: "a minute ago" }, // 45-89 seconds
117
- { min: 90000, max: 2649999, value: `${Math.round(elapsedTime / 60000)} minutes ago`}, // 90s-44 minutes
118
- { min: 2650000, max: 7299999, value: "an hour ago" }, // 45-120 minutes
119
- { min: 7300000, max: 75699999, value: `${Math.round(elapsedTime / 3600000)} hours ago`}, // 2-21 hours
120
- { min: 75700000, max: 172899999, value: "a day ago" }, // 22-48 hours
121
- { min: 172900000, max: 2169999999, value: `${Math.round(elapsedTime / 86400000)} days ago`}, // 2-25 days
122
- { min: 2170000000, max: 5184999999, value: "a month ago"}, // 26-60 days
123
- { min: 5185000000, max: 27561699999, value: `${Math.round(elapsedTime / 30.44 * 24 * 60 * 60 * 1000)} months ago`}, // 60-319 days
124
- { min: 27561700000, max: 63072999999, value: "a year ago"}, // 320-730 days
125
- ];
126
-
127
- for (const timeDate of elapsedTimeData) {
128
- if (elapsedTime >= timeDate.min && elapsedTime <= timeDate.max) {
129
- elapsedTimeString = timeDate.value;
130
- break;
131
- }
132
- }
133
-
134
- return elapsedTimeString
135
- }
75
+ toTime() {
76
+ const time = this.value.strftime('%I:%M')
136
77
 
137
- export const toCustomFormat = (newDate: Date, format = 'month_day'): string => {
138
- const date = new Date(newDate)
139
- if (format == "month_day") {
140
- return `${toMonthNum(date)}/${toDay(date)}`
141
- } else {
142
- return `${date.toLocaleString(undefined, {month: "short"})} ${toDay(date)}`
78
+ // strftime adds a leading 0 on single hour times. ie 08:31.
79
+ // this removes that 0 to match the rails kit.
80
+ return time.charAt() === '0' ? time.slice(1) : time
143
81
  }
144
- }
145
82
 
146
- export default {
147
- toMinute,
148
- toHour,
149
- toDay,
150
- toDayAbbr,
151
- toWeekday,
152
- toMonth,
153
- toMonthNum,
154
- toYear,
155
- toTime,
156
- toMeridiem,
157
- toTimeZone,
158
- toTimeWithMeridiem,
159
- toIso,
160
- fromNow,
161
- toCustomFormat,
162
- }
83
+ toTimezone() {
84
+ return this.value.strftime('%Z')
85
+ }
86
+
87
+ toTimeWithMeridian() {
88
+ return this.toTime() + this.toMeridian()
89
+ }
90
+ }