playbook_ui 12.35.0 → 12.36.0.pre.alpha.PLAY936momentjs1050

Sign up to get free protection for your applications and to get access to all the features.
Files changed (30) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_date/_date.tsx +7 -8
  3. data/app/pb_kits/playbook/pb_date/docs/_date_alignment.jsx +2 -2
  4. data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx +29 -5
  5. data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.jsx +2 -2
  6. data/app/pb_kits/playbook/pb_date/docs/_date_variants.jsx +5 -5
  7. data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.tsx +45 -31
  8. data/app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.tsx +5 -3
  9. data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.tsx +24 -21
  10. data/app/pb_kits/playbook/pb_date_time/_date_time.tsx +1 -1
  11. data/app/pb_kits/playbook/pb_date_time/dateTime.test.js +1 -1
  12. data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx +2 -2
  13. data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.test.js +1 -1
  14. data/app/pb_kits/playbook/pb_date_year_stacked/_date_year_stacked.tsx +6 -8
  15. data/app/pb_kits/playbook/pb_dialog/dialogHelper.js +7 -3
  16. data/app/pb_kits/playbook/pb_kit/dateTime.ts +145 -64
  17. data/app/pb_kits/playbook/pb_label_value/_label_value.tsx +52 -31
  18. data/app/pb_kits/playbook/pb_message/_message.tsx +24 -24
  19. data/app/pb_kits/playbook/pb_popover/_popover.tsx +14 -6
  20. data/app/pb_kits/playbook/pb_popover/docs/_popover_close.jsx +2 -0
  21. data/app/pb_kits/playbook/pb_popover/index.ts +5 -2
  22. data/app/pb_kits/playbook/pb_time/_time.tsx +9 -11
  23. data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.tsx +46 -49
  24. data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.tsx +4 -6
  25. data/app/pb_kits/playbook/pb_timestamp/_timestamp.tsx +11 -11
  26. data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.tsx +8 -11
  27. data/dist/playbook-rails.js +7 -7
  28. data/lib/playbook/version.rb +2 -2
  29. metadata +7 -8
  30. data/app/pb_kits/playbook/pb_logistic/_logistic.jsx +0 -120
@@ -1,90 +1,171 @@
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
-
11
1
  const ABBR_DAYS = ['SU', 'M', 'T', 'W', 'TH', 'F', 'S']
12
2
 
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
- }
3
+ const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
18
4
 
19
- convertToTimestampZone(value: string | Date, zone: string) {
20
- return moment(value).tz(zone)
21
- }
5
+ const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
22
6
 
23
- convertToTimezone() {
24
- return this.value.strftime('%Z')
7
+ const formatDate = (newDate: Date | string) => {
8
+ if (typeof newDate === "string") {
9
+ const unhyphenatedDate = new Date(newDate.replace(/-/g, "/"))
10
+ return unhyphenatedDate
25
11
  }
26
12
 
27
- toCustomFormat(format = '%-m/%-d') {
28
- return this.value.strftime(format)
29
- }
13
+ return new Date(newDate)
14
+ }
30
15
 
31
- toYear() {
32
- return this.value.strftime('%Y')
16
+ export const toMinute = (newDate: Date | string, timeZone?: string): string => {
17
+ const date = formatDate(newDate)
18
+ if (timeZone) {
19
+ return date.toLocaleTimeString(undefined, {timeZone, hour: "2-digit", minute: "2-digit"}).slice(3, 5);
20
+ } else {
21
+ return date.toLocaleTimeString(undefined, {hour: "2-digit", minute: "2-digit"}).slice(3, 5);
33
22
  }
23
+ }
34
24
 
35
- toMonth() {
36
- return this.value.strftime('%b')
25
+ export const toHour = (newDate: Date | string, timeZone?: string): string => {
26
+ const date = formatDate(newDate)
27
+ if (timeZone) {
28
+ return date.toLocaleTimeString(undefined, {timeZone, hour: "numeric"}).split(' ')[0];
29
+ } else {
30
+ return date.toLocaleTimeString(undefined, {hour: "numeric"}).split(' ')[0];
37
31
  }
32
+ }
38
33
 
39
- toMonthNum() {
40
- return this.value.strftime('%-m')
41
- }
34
+ export const toDay = (newDate: Date | string, timeZone?: string): number => {
35
+ if (timeZone) {
36
+ const date = new Date(formatDate(newDate).toLocaleString(undefined, { timeZone }));
37
+ return date.getDate()
38
+ } else {
39
+ const date = formatDate(newDate)
40
+ return date.getDate()
41
+ }
42
+ }
42
43
 
43
- toMonthFull() {
44
- return this.value.strftime('%B')
45
- }
44
+ export const toDayAbbr = (newDate: Date | string): string => {
45
+ const date = formatDate(newDate)
46
+ return ABBR_DAYS[date.getUTCDay()]
47
+ }
46
48
 
47
- toDay() {
48
- return this.value.strftime('%e')
49
- }
49
+ export const toWeekday = (newDate: Date | string): string => {
50
+ const date = formatDate(newDate)
51
+ return days[date.getUTCDay()]
52
+ }
50
53
 
51
- toDayAbbr() {
52
- return ABBR_DAYS[this.value.day()]
53
- }
54
+ export const toMonth = (newDate: Date | string, timeZone?: string): string => {
55
+ if (timeZone) {
56
+ const date = new Date(formatDate(newDate).toLocaleString(undefined, { timeZone }));
57
+ return months[date.getUTCMonth()]
58
+ } else {
59
+ const date = formatDate(newDate)
60
+ return months[date.getUTCMonth()]
61
+ }
62
+ }
54
63
 
55
- toWeekday() {
56
- return this.value.strftime('%a')
57
- }
64
+ export const toMonthNum = (newDate: Date | string): number => {
65
+ const date = formatDate(newDate)
66
+ return date.getUTCMonth() +1
67
+ }
58
68
 
59
- toHour() {
60
- return this.value.strftime('%l')
61
- }
69
+ export const toYear = (newDate: Date | string, timeZone?: string): number => {
70
+ if (timeZone) {
71
+ const date = new Date(newDate.toLocaleString(undefined, { timeZone }));
72
+ return date.getUTCFullYear()
73
+ } else {
74
+ const date = new Date(newDate)
75
+ return date.getUTCFullYear()
76
+ }
77
+ }
62
78
 
63
- toMinute() {
64
- return this.value.strftime('%M')
79
+ export const toTime = (newDate: Date | string, timeZone?: string): string => {
80
+ const date = formatDate(newDate)
81
+ if (timeZone) {
82
+ return date.toLocaleTimeString(undefined, {timeZone, timeStyle: "short"}).split(' ')[0];
83
+ } else {
84
+ return date.toLocaleTimeString(undefined, {timeStyle: "short"}).split(' ')[0];
65
85
  }
86
+ }
66
87
 
67
- toMeridian() {
68
- return this.value.strftime('%P')[0]
69
- }
88
+ export const toMeridiem = (newDate: Date | string, timeZone?: string): string => {
89
+ const date = formatDate(newDate)
90
+ if (timeZone) {
91
+ return date.toLocaleString(undefined, {timeZone, hour12: true }).slice(-2).charAt(0).toLocaleLowerCase();
92
+ } else {
93
+ return date.toLocaleString(undefined, {hour12: true }).slice(-2).charAt(0).toLocaleLowerCase();
94
+ }
95
+ }
70
96
 
71
- toIso() {
72
- return this.value.toISOString()
73
- }
97
+ export const toTimeZone = (newDate: Date | string, timeZone?: string): string => {
98
+ const date = formatDate(newDate)
99
+ if (timeZone) {
100
+ return date.toLocaleString(undefined, {timeZone, timeZoneName: "short"}).split(' ')[3];
101
+ } else {
102
+ return date.toLocaleString(undefined, {timeZoneName: "short"}).split(' ')[3];
103
+ }
104
+ }
74
105
 
75
- toTime() {
76
- const time = this.value.strftime('%I:%M')
106
+ export const toTimeWithMeridiem = (newDate: Date | string, timeZone: string): string => {
107
+ const date = formatDate(newDate)
108
+ return `${toTime(date, timeZone)}${toMeridiem(date, timeZone)}`;
109
+ }
77
110
 
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
81
- }
111
+ export const toIso = (newDate: Date | string): string => {
112
+ const date = formatDate(newDate)
113
+ return date.toISOString()
114
+ }
82
115
 
83
- toTimezone() {
84
- return this.value.strftime('%Z')
85
- }
116
+ export const fromNow = (newDate: Date | string): string => {
117
+
118
+ const startDate = formatDate(newDate).getTime()
119
+ const endDate = new Date().getTime()
120
+ const elapsedTime = endDate - startDate
121
+ let elapsedTimeString = `${Math.round(elapsedTime / (365.25 * 24 * 60 * 60 * 1000))} years ago.`; // 730+ days
122
+
123
+ const elapsedTimeData = [
124
+ { min: 0, max: 44999, value: "a few seconds ago" }, // 0-44 seconds
125
+ { min: 45000, max: 89999, value: "a minute ago" }, // 45-89 seconds
126
+ { min: 90000, max: 2649999, value: `${Math.round(elapsedTime / 60000)} minutes ago`}, // 90s-44 minutes
127
+ { min: 2650000, max: 7299999, value: "an hour ago" }, // 45-120 minutes
128
+ { min: 7300000, max: 75699999, value: `${Math.round(elapsedTime / 3600000)} hours ago`}, // 2-21 hours
129
+ { min: 75700000, max: 172899999, value: "a day ago" }, // 22-48 hours
130
+ { min: 172900000, max: 2169999999, value: `${Math.round(elapsedTime / 86400000)} days ago`}, // 2-25 days
131
+ { min: 2170000000, max: 5184999999, value: "a month ago"}, // 26-60 days
132
+ { min: 5185000000, max: 27561699999, value: `${Math.round(elapsedTime / 30.44 * 24 * 60 * 60 * 1000)} months ago`}, // 60-319 days
133
+ { min: 27561700000, max: 63072999999, value: "a year ago"}, // 320-730 days
134
+ ];
135
+
136
+ for (const timeDate of elapsedTimeData) {
137
+ if (elapsedTime >= timeDate.min && elapsedTime <= timeDate.max) {
138
+ elapsedTimeString = timeDate.value;
139
+ break;
140
+ }
141
+ }
142
+
143
+ return elapsedTimeString
144
+ }
86
145
 
87
- toTimeWithMeridian() {
88
- return this.toTime() + this.toMeridian()
146
+ export const toCustomFormat = (newDate: Date | string, format = 'month_day'): string => {
147
+ const date = formatDate(newDate)
148
+ if (format == "month_day") {
149
+ return `${toMonthNum(date)}/${toDay(date)}`
150
+ } else {
151
+ return `${date.toLocaleString(undefined, {month: "short"})} ${toDay(date)}`
89
152
  }
90
153
  }
154
+
155
+ export default {
156
+ toMinute,
157
+ toHour,
158
+ toDay,
159
+ toDayAbbr,
160
+ toWeekday,
161
+ toMonth,
162
+ toMonthNum,
163
+ toYear,
164
+ toTime,
165
+ toMeridiem,
166
+ toTimeZone,
167
+ toTimeWithMeridiem,
168
+ toIso,
169
+ fromNow,
170
+ toCustomFormat,
171
+ }
@@ -1,8 +1,8 @@
1
1
  import React from "react";
2
2
  import classnames from "classnames";
3
- import DateTime from "../pb_kit/dateTime";
4
3
  import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
5
4
  import { globalProps } from "../utilities/globalProps";
5
+ import DateTime from '../pb_kit/dateTime';
6
6
 
7
7
  import Body from "../pb_body/_body";
8
8
  import Caption from "../pb_caption/_caption";
@@ -26,9 +26,9 @@ type LabelValueProps = {
26
26
  title?: string;
27
27
  };
28
28
 
29
- const dateString = (value: DateTime) => {
30
- const month = value.toMonthNum();
31
- const day = value.toDay();
29
+ const dateString = (value: Date) => {
30
+ const month = DateTime.toMonthNum(value);
31
+ const day = DateTime.toDay(value);
32
32
 
33
33
  return ` · ${month}/${day}`;
34
34
  };
@@ -52,7 +52,6 @@ const LabelValue = (props: LabelValueProps) => {
52
52
 
53
53
  const ariaProps = buildAriaProps(aria);
54
54
  const dataProps = buildDataProps(data);
55
- const formattedDate = new DateTime({ value: date });
56
55
  const variantClass = variant === "details" ? "details" : "";
57
56
  const classes = classnames(
58
57
  buildCss("pb_label_value_kit", variantClass),
@@ -62,59 +61,81 @@ const LabelValue = (props: LabelValueProps) => {
62
61
 
63
62
  return (
64
63
  <div
65
- {...ariaProps}
66
- {...dataProps}
67
- className={classes}
68
- id={id}
69
- title={title}
64
+ {...ariaProps}
65
+ {...dataProps}
66
+ className={classes}
67
+ id={id}
68
+ title={title}
70
69
  >
71
- <Caption dark={dark} text={label} />
70
+ <Caption dark={dark}
71
+ text={label}
72
+ />
72
73
  {variant === "details" ? (
73
- <Flex inline vertical="center">
74
+ <Flex inline
75
+ vertical="center"
76
+ >
74
77
  {icon && (
75
- <Body color="light" dark={dark} marginRight="xs">
76
- <Icon dark={dark} fixedWidth icon={icon} />
78
+ <Body color="light"
79
+ dark={dark}
80
+ marginRight="xs"
81
+ >
82
+ <Icon dark={dark}
83
+ fixedWidth
84
+ icon={icon}
85
+ />
77
86
  </Body>
78
87
  )}
79
88
  {description && (
80
89
  <Body
81
- color="light"
82
- dark={dark}
83
- marginRight="xs"
84
- text={description}
90
+ color="light"
91
+ dark={dark}
92
+ marginRight="xs"
93
+ text={description}
85
94
  />
86
95
  )}
87
96
  {active === true ? (
88
- <Flex inline vertical="center">
97
+ <Flex inline
98
+ vertical="center"
99
+ >
89
100
  {title && (
90
- <Title dark={dark} size={4} text={title} variant="link" />
101
+ <Title dark={dark}
102
+ size={4}
103
+ text={title}
104
+ variant="link"
105
+ />
91
106
  )}
92
107
  {date && (
93
108
  <Title
94
- dark={dark}
95
- marginLeft="xs"
96
- size={4}
97
- text={" " + dateString(formattedDate)}
98
- variant="link"
109
+ dark={dark}
110
+ marginLeft="xs"
111
+ size={4}
112
+ text={" " + dateString(date)}
113
+ variant="link"
99
114
  />
100
115
  )}
101
116
  </Flex>
102
117
  ) : (
103
118
  <>
104
- {title && <Title dark={dark} size={4} text={title} />}
119
+ {title && <Title dark={dark}
120
+ size={4}
121
+ text={title}
122
+ />
123
+ }
105
124
  {date && (
106
125
  <Title
107
- dark={dark}
108
- marginLeft="xs"
109
- size={4}
110
- text={" " + dateString(formattedDate)}
126
+ dark={dark}
127
+ marginLeft="xs"
128
+ size={4}
129
+ text={" " + dateString(date)}
111
130
  />
112
131
  )}
113
132
  </>
114
133
  )}
115
134
  </Flex>
116
135
  ) : (
117
- <Body dark={dark} text={value} />
136
+ <Body dark={dark}
137
+ text={value}
138
+ />
118
139
  )}
119
140
  </div>
120
141
  );
@@ -25,7 +25,7 @@ type MessageProps = {
25
25
  label?: string,
26
26
  message: string,
27
27
  timestamp?: string,
28
- timestampObject?: string,
28
+ timestampObject?: Date,
29
29
  timezone?: string,
30
30
  alignTimestamp?: string,
31
31
  }
@@ -62,50 +62,50 @@ const Message = (props: MessageProps) => {
62
62
 
63
63
  return (
64
64
  <div
65
- {...ariaProps}
66
- {...dataProps}
67
- className={classes}
68
- id={id}
65
+ {...ariaProps}
66
+ {...dataProps}
67
+ className={classes}
68
+ id={id}
69
69
  >
70
70
  {shouldDisplayAvatar &&
71
71
  <Avatar
72
- imageUrl={avatarUrl}
73
- name={avatarName}
74
- size="xs"
75
- status={avatarStatus}
72
+ imageUrl={avatarUrl}
73
+ name={avatarName}
74
+ size="xs"
75
+ status={avatarStatus}
76
76
  />
77
77
  }
78
78
  <div className="content_wrapper">
79
79
  <Flex
80
- justify={alignTimestamp === 'left' ? 'none' : 'between'}
81
- orientation="row"
80
+ justify={alignTimestamp === 'left' ? 'none' : 'between'}
81
+ orientation="row"
82
82
  >
83
83
  {label &&
84
84
  <Title
85
- className="message_title"
86
- size={4}
87
- text={label}
85
+ className="message_title"
86
+ size={4}
87
+ text={label}
88
88
  />
89
89
  }
90
90
  <Timestamp
91
- className={`pull-${alignTimestamp} ${timestampObject ? 'message_humanized_time' : null}`}
92
- text={timestamp}
93
- timestamp={''}
94
- timezone={timezone}
91
+ className={`pull-${alignTimestamp} ${timestampObject ? 'message_humanized_time' : null}`}
92
+ text={timestamp}
93
+ timestamp={''}
94
+ timezone={timezone}
95
95
  />
96
96
  {timestampObject &&
97
97
  <Timestamp
98
- className={`pull-${alignTimestamp} message_timestamp`}
99
- text={''}
100
- timestamp={timestampObject}
101
- timezone={timezone}
98
+ className={`pull-${alignTimestamp} message_timestamp`}
99
+ text={''}
100
+ timestamp={timestampObject}
101
+ timezone={timezone}
102
102
  />
103
103
  }
104
104
  </Flex>
105
105
  {message &&
106
106
  <Body
107
- className="pb_message_body"
108
- text={message}
107
+ className="pb_message_body"
108
+ text={message}
109
109
  />
110
110
  }
111
111
  {children}
@@ -1,4 +1,4 @@
1
- import React, { useEffect } from "react";
1
+ import React, { useEffect, useState } from "react";
2
2
  import ReactDOM from "react-dom";
3
3
  import {
4
4
  Popper,
@@ -17,6 +17,7 @@ import {
17
17
 
18
18
  import classnames from "classnames";
19
19
  import { globalProps, GlobalProps } from "../utilities/globalProps";
20
+ import _uniqueId from 'lodash/uniqueId';
20
21
 
21
22
  type PbPopoverProps = {
22
23
  aria?: { [key: string]: string };
@@ -72,6 +73,7 @@ const Popover = (props: PbPopoverProps) => {
72
73
  maxWidth,
73
74
  minHeight,
74
75
  minWidth,
76
+ targetId,
75
77
  } = props;
76
78
 
77
79
  const popoverSpacing =
@@ -123,6 +125,7 @@ const Popover = (props: PbPopoverProps) => {
123
125
  popoverSpacing,
124
126
  overflowHandling
125
127
  )}
128
+ id={targetId}
126
129
  style={widthHeightStyles()}
127
130
  >
128
131
  {children}
@@ -136,6 +139,7 @@ const Popover = (props: PbPopoverProps) => {
136
139
  };
137
140
 
138
141
  const PbReactPopover = (props: PbPopoverProps) => {
142
+ const [targetId] = useState(_uniqueId('id-'))
139
143
  const {
140
144
  className,
141
145
  children,
@@ -163,25 +167,27 @@ const PbReactPopover = (props: PbPopoverProps) => {
163
167
  "click",
164
168
  ({ target }) => {
165
169
  const targetIsPopover =
166
- (target as HTMLElement).closest("[class^=pb_popover_tooltip]") !==
170
+ (target as HTMLElement).closest("#" + targetId) !==
167
171
  null;
168
172
  const targetIsReference =
169
- (target as HTMLElement).closest(".pb_popover_reference_wrapper") !==
173
+ (target as HTMLElement).closest("#reference-" + targetId) !==
170
174
  null;
171
175
 
172
176
  switch (closeOnClick) {
173
177
  case "outside":
174
- if (!targetIsPopover || targetIsReference) {
178
+ if (!targetIsPopover && !targetIsReference) {
175
179
  shouldClosePopover(true);
176
180
  }
177
181
  break;
178
182
  case "inside":
179
- if (targetIsPopover || targetIsReference) {
183
+ if (targetIsPopover) {
180
184
  shouldClosePopover(true);
181
185
  }
182
186
  break;
183
187
  case "any":
184
- shouldClosePopover(true);
188
+ if (targetIsPopover || !targetIsPopover && !targetIsReference) {
189
+ shouldClosePopover(true);
190
+ }
185
191
  break;
186
192
  }
187
193
  },
@@ -200,6 +206,7 @@ const PbReactPopover = (props: PbPopoverProps) => {
200
206
  offset={offset}
201
207
  placement={placement}
202
208
  referenceElement={referenceElement}
209
+ targetId={targetId}
203
210
  zIndex={zIndex}
204
211
  {...props}
205
212
  >
@@ -214,6 +221,7 @@ const PbReactPopover = (props: PbPopoverProps) => {
214
221
  <PopperReference>
215
222
  {({ ref }) => (
216
223
  <span
224
+ id={"reference-" + targetId}
217
225
  className="pb_popover_reference_wrapper"
218
226
  ref={ref}>
219
227
  <reference.type {...reference.props} />
@@ -24,6 +24,7 @@ const PopoverClose = (props) => {
24
24
 
25
25
  const handleOutsideTogglePopover = () => {
26
26
  setOutsideShowPopover(!showOutsidePopover)
27
+ setAnyShowPopover(false)
27
28
  }
28
29
 
29
30
  const handleAnyShouldClosePopover = (shouldClosePopover) => {
@@ -32,6 +33,7 @@ const PopoverClose = (props) => {
32
33
 
33
34
  const handleAnyTogglePopover = () => {
34
35
  setAnyShowPopover(!showAnyPopover)
36
+ setOutsideShowPopover(false)
35
37
  }
36
38
 
37
39
  const insidePopoverTrigger = (
@@ -49,13 +49,16 @@ export default class PbPopover extends PbEnhancedElement {
49
49
  checkCloseTooltip() {
50
50
  document.querySelector('body').addEventListener('click', ({ target } ) => {
51
51
  const isTooltipElement = (target as HTMLElement).closest(`#${this.tooltipId}`) !== null
52
+ const isTriggerElement = (target as HTMLElement).closest(`#${this.triggerElementId}`) !== null
52
53
 
53
54
  switch (this.closeOnClick) {
54
55
  case 'any':
55
- this.hideTooltip()
56
+ if (isTooltipElement || !isTooltipElement && !isTriggerElement) {
57
+ this.hideTooltip()
58
+ }
56
59
  break
57
60
  case 'outside':
58
- if (!isTooltipElement) {
61
+ if (!isTooltipElement && !isTriggerElement) {
59
62
  this.hideTooltip()
60
63
  }
61
64
  break
@@ -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";
5
4
  import { buildCss } from "../utilities/props";
6
5
  import { globalProps, 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";
@@ -13,7 +13,7 @@ type TimeProps = {
13
13
  align?: "left" | "center" | "right";
14
14
  className?: string | string[];
15
15
  data?: string;
16
- date: string;
16
+ date: Date;
17
17
  dark?: boolean;
18
18
  id?: string;
19
19
  showIcon?: boolean;
@@ -41,8 +41,6 @@ const Time = (props: TimeProps) => {
41
41
  className
42
42
  );
43
43
 
44
- const dateTimestamp = new DateTime({ value: date, zone: timeZone });
45
-
46
44
  return (
47
45
  <div className={classes}>
48
46
  {showIcon && (
@@ -70,18 +68,18 @@ const Time = (props: TimeProps) => {
70
68
  )
71
69
  )}
72
70
 
73
- <time dateTime={date}>
71
+ <time dateTime={date.toString()}>
74
72
  <span>
75
73
  {unstyled
76
74
  ? (
77
75
  <>
78
76
  <span>
79
- {dateTimestamp.toTimeWithMeridian()}
77
+ {DateTime.toTimeWithMeridiem(date, timeZone)}
80
78
  </span>
81
79
  {" "}
82
80
  {showTimezone && (
83
81
  <span>
84
- {dateTimestamp.toTimezone()}
82
+ {DateTime.toTimeZone(date, timeZone)}
85
83
  </span>
86
84
  )}
87
85
  </>
@@ -92,13 +90,13 @@ const Time = (props: TimeProps) => {
92
90
  <Body
93
91
  className="pb_time"
94
92
  tag="span"
95
- text={dateTimestamp.toTimeWithMeridian()}
93
+ text={DateTime.toTimeWithMeridiem(date, timeZone)}
96
94
  />{" "}
97
95
  {showTimezone && (
98
96
  <Body
99
97
  color="light"
100
98
  tag="span"
101
- text={dateTimestamp.toTimezone()}
99
+ text={DateTime.toTimeZone(date, timeZone)}
102
100
  />
103
101
  )}
104
102
  </>
@@ -108,13 +106,13 @@ const Time = (props: TimeProps) => {
108
106
  <Caption
109
107
  color="light"
110
108
  tag="span"
111
- text={dateTimestamp.toTimeWithMeridian()}
109
+ text={DateTime.toTimeWithMeridiem(date, timeZone)}
112
110
  />{" "}
113
111
  {showTimezone && (
114
112
  <Caption
115
113
  color="light"
116
114
  tag="span"
117
- text={dateTimestamp.toTimezone()}
115
+ text={DateTime.toTimeZone(date, timeZone)}
118
116
  />
119
117
  )}
120
118
  </>