playbook_ui 7.3.0.pre.alpha12 → 7.4.0.pre.alpha5
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/assets/images/github-brands.svg +1 -0
- data/app/assets/images/landing-background.svg +36 -0
- data/app/assets/images/landing-image.svg +203 -0
- data/app/assets/images/{pb.logo.svg → pb-logo.svg} +2 -2
- data/app/assets/images/pb-white-logo.svg +15 -0
- data/app/pb_kits/playbook/_playbook.scss +3 -0
- data/app/pb_kits/playbook/data/menu.yml +2 -1
- data/app/pb_kits/playbook/index.js +2 -0
- data/app/pb_kits/playbook/pb_background/_background.html.erb +14 -0
- data/app/pb_kits/playbook/pb_background/_background.jsx +63 -0
- data/app/pb_kits/playbook/pb_background/_background.scss +35 -0
- data/app/pb_kits/playbook/pb_background/background.rb +35 -0
- data/app/pb_kits/playbook/pb_background/docs/_background_dark.html.erb +3 -0
- data/app/pb_kits/playbook/pb_background/docs/_background_dark.jsx +13 -0
- data/app/pb_kits/playbook/pb_background/docs/_background_gradient.html.erb +3 -0
- data/app/pb_kits/playbook/pb_background/docs/_background_gradient.jsx +13 -0
- data/app/pb_kits/playbook/pb_background/docs/_background_image.html.erb +13 -0
- data/app/pb_kits/playbook/pb_background/docs/_background_image.jsx +30 -0
- data/app/pb_kits/playbook/pb_background/docs/_background_light.html.erb +3 -0
- data/app/pb_kits/playbook/pb_background/docs/_background_light.jsx +13 -0
- data/app/pb_kits/playbook/pb_background/docs/_background_white.html.erb +3 -0
- data/app/pb_kits/playbook/pb_background/docs/_background_white.jsx +14 -0
- data/app/pb_kits/playbook/pb_background/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_background/docs/example.yml +15 -0
- data/app/pb_kits/playbook/pb_background/docs/index.js +6 -0
- data/app/pb_kits/playbook/pb_collapsible/_collapsible.html.erb +1 -1
- data/app/pb_kits/playbook/pb_collapsible/_collapsible.jsx +50 -107
- data/app/pb_kits/playbook/pb_collapsible/_collapsible.scss +1 -1
- data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.jsx +40 -0
- data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.jsx +58 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_dark.html.erb +1 -1
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.html.erb +1 -1
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.jsx +12 -10
- data/app/pb_kits/playbook/pb_collapsible/index.js +2 -2
- data/app/pb_kits/playbook/pb_date/_date.html.erb +64 -8
- data/app/pb_kits/playbook/pb_date/_date.jsx +115 -66
- data/app/pb_kits/playbook/pb_date/_date.scss +30 -0
- data/app/pb_kits/playbook/pb_date/date.rb +20 -9
- data/app/pb_kits/playbook/pb_date/docs/_date_alignment.html.erb +24 -0
- data/app/pb_kits/playbook/pb_date/docs/_date_alignment.jsx +35 -0
- data/app/pb_kits/playbook/pb_date/docs/_date_default.html.erb +21 -6
- data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx +43 -12
- data/app/pb_kits/playbook/pb_date/docs/_date_variants.html.erb +27 -0
- data/app/pb_kits/playbook/pb_date/docs/_date_variants.jsx +43 -0
- data/app/pb_kits/playbook/pb_date/docs/example.yml +4 -0
- data/app/pb_kits/playbook/pb_date/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.html.erb +19 -14
- data/app/pb_kits/playbook/pb_date_time/_date_time.html.erb +31 -0
- data/app/pb_kits/playbook/pb_date_time/_date_time.jsx +73 -0
- data/app/pb_kits/playbook/pb_date_time/_date_time.scss +26 -0
- data/app/pb_kits/playbook/pb_date_time/date_time.rb +29 -0
- data/app/pb_kits/playbook/pb_date_time/docs/_date_time_align.html.erb +17 -0
- data/app/pb_kits/playbook/pb_date_time/docs/_date_time_align.jsx +35 -0
- data/app/pb_kits/playbook/pb_date_time/docs/_date_time_default.html.erb +20 -0
- data/app/pb_kits/playbook/pb_date_time/docs/_date_time_default.jsx +38 -0
- data/app/pb_kits/playbook/pb_date_time/docs/_date_time_size.html.erb +26 -0
- data/app/pb_kits/playbook/pb_date_time/docs/_date_time_size.jsx +75 -0
- data/app/pb_kits/playbook/pb_date_time/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_date_time/docs/example.yml +11 -0
- data/app/pb_kits/playbook/pb_date_time/docs/index.js +3 -0
- data/app/pb_kits/playbook/pb_flex/_flex.jsx +1 -1
- data/app/pb_kits/playbook/pb_flex/_flex.scss +4 -0
- data/app/pb_kits/playbook/pb_flex/flex.rb +1 -1
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +52 -1
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -1
- data/app/pb_kits/playbook/pb_form/docs/_form_simple_form.html.erb +1 -1
- data/app/pb_kits/playbook/pb_form/docs/_form_simple_form_validate.html.erb +1 -1
- data/app/pb_kits/playbook/pb_form/form_builder/date_picker_field.rb +19 -1
- data/app/pb_kits/playbook/pb_home_address_street/home_address_street.rb +1 -1
- data/app/pb_kits/playbook/pb_progress_step/_progress_step.jsx +3 -1
- data/app/pb_kits/playbook/pb_progress_step/_progress_step.scss +13 -4
- data/app/pb_kits/playbook/pb_progress_step/_progress_step_item.html.erb +1 -1
- data/app/pb_kits/playbook/pb_progress_step/_progress_step_item.jsx +5 -7
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_custom_icon.html.erb +12 -0
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tracker_click_events.jsx +48 -0
- data/app/pb_kits/playbook/pb_progress_step/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_progress_step/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_progress_step/progress_step.rb +5 -3
- data/app/pb_kits/playbook/pb_progress_step/progress_step_item.rb +6 -0
- data/app/pb_kits/playbook/pb_timestamp/_timestamp.html.erb +13 -1
- data/app/pb_kits/playbook/pb_timestamp/_timestamp.jsx +96 -20
- data/app/pb_kits/playbook/pb_timestamp/_timestamp.scss +12 -1
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.html.erb +69 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.jsx +91 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.html.erb +21 -1
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.jsx +31 -4
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.html.erb +14 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.jsx +27 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed_align.html.erb +54 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed_align.jsx +73 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.html.erb +59 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.jsx +74 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones_align.html.erb +177 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones_align.jsx +209 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.html.erb +35 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.jsx +51 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_align.html.erb +123 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_align.jsx +146 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/example.yml +14 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/index.js +7 -0
- data/app/pb_kits/playbook/pb_timestamp/timestamp.rb +67 -1
- data/app/pb_kits/playbook/pb_tooltip/_tooltip.scss +46 -19
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb +46 -10
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_white.html.erb +4 -4
- data/app/pb_kits/playbook/pb_tooltip/tooltip.rb +3 -2
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.jsx +14 -2
- data/app/pb_kits/playbook/pb_typeahead/components/ClearIndicator.jsx +20 -0
- data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.jsx +8 -15
- data/app/pb_kits/playbook/pb_typeahead/components/Option.jsx +1 -6
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.html.erb +10 -4
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md +20 -4
- data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +4 -0
- data/lib/playbook/version.rb +2 -1
- metadata +60 -6
- data/app/assets/images/clark.jpg +0 -0
- data/app/assets/images/giant.jpg +0 -0
- data/app/pb_kits/playbook/pb_collapsible/useToggler.js +0 -10
@@ -0,0 +1,12 @@
|
|
1
|
+
<br><br>
|
2
|
+
<%= pb_rails("progress_step",props:{ variant:"tracker", icon:true}) do %>
|
3
|
+
<%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
|
4
|
+
<%= pb_rails("caption", props:{text: "Ordered"})%>
|
5
|
+
<% end %>
|
6
|
+
<%= pb_rails("progress_step/progress_step_item", props: {status: "active", icon: "exclamation-triangle"}) do %>
|
7
|
+
<%= pb_rails("caption", props:{text: "Shipped"})%>
|
8
|
+
<% end %>
|
9
|
+
<%= pb_rails("progress_step/progress_step_item", props: {status: "inactive"}) do %>
|
10
|
+
<%= pb_rails("caption", props:{text: "Delivered"})%>
|
11
|
+
<% end %>
|
12
|
+
<% end %>
|
@@ -0,0 +1,48 @@
|
|
1
|
+
import React, { useState } from 'react'
|
2
|
+
import ProgressStep from '../_progress_step.jsx'
|
3
|
+
import ProgressStepItem from '../_progress_step_item.jsx'
|
4
|
+
import { Button, Caption } from '../../'
|
5
|
+
const ProgressStepTrackerClickEvents = (props) => {
|
6
|
+
const [warning, setWarning] = useState(false)
|
7
|
+
const showWarning = warning == true
|
8
|
+
const WarningIcon = (
|
9
|
+
<ProgressStepItem
|
10
|
+
icon="exclamation-triangle"
|
11
|
+
key={Math.random()}
|
12
|
+
status="active"
|
13
|
+
>
|
14
|
+
<Caption>{'Shipped'}</Caption>
|
15
|
+
</ProgressStepItem>
|
16
|
+
)
|
17
|
+
const CheckedIcon = (
|
18
|
+
<ProgressStepItem
|
19
|
+
key={Math.random()}
|
20
|
+
status="active"
|
21
|
+
>
|
22
|
+
<Caption>{'Shipped'}</Caption>
|
23
|
+
</ProgressStepItem>
|
24
|
+
)
|
25
|
+
return (
|
26
|
+
<div>
|
27
|
+
<Button onClick={() => setWarning(!warning)}>{'Toggle State'}</Button>
|
28
|
+
<br />
|
29
|
+
<br />
|
30
|
+
<br />
|
31
|
+
<ProgressStep
|
32
|
+
icon
|
33
|
+
variant="tracker"
|
34
|
+
{...props}
|
35
|
+
>
|
36
|
+
<ProgressStepItem status="complete">
|
37
|
+
<Caption>{'Ordered'}</Caption>
|
38
|
+
</ProgressStepItem>
|
39
|
+
{showWarning ? WarningIcon : CheckedIcon}
|
40
|
+
<ProgressStepItem status="inactive">
|
41
|
+
<Caption>{'Delivered'}</Caption>
|
42
|
+
</ProgressStepItem>
|
43
|
+
</ProgressStep>
|
44
|
+
</div>
|
45
|
+
)
|
46
|
+
}
|
47
|
+
|
48
|
+
export default ProgressStepTrackerClickEvents
|
@@ -3,9 +3,11 @@ examples:
|
|
3
3
|
- progress_step_default: Default
|
4
4
|
- progress_step_vertical: Vertical
|
5
5
|
- progress_step_tracker: Tracker
|
6
|
+
- progress_step_custom_icon: Custom Icon
|
6
7
|
|
7
8
|
|
8
9
|
react:
|
9
10
|
- progress_step_default: Default
|
10
11
|
- progress_step_vertical: Vertical
|
11
12
|
- progress_step_tracker: Tracker
|
13
|
+
- progress_step_tracker_click_events: Using State
|
@@ -1,3 +1,4 @@
|
|
1
1
|
export { default as ProgressStepDefault } from './_progress_step_default.jsx'
|
2
2
|
export { default as ProgressStepVertical } from './_progress_step_vertical.jsx'
|
3
3
|
export { default as ProgressStepTracker } from './_progress_step_tracker.jsx'
|
4
|
+
export { default as ProgressStepTrackerClickEvents } from './_progress_step_tracker_click_events.jsx'
|
@@ -12,12 +12,14 @@ module Playbook
|
|
12
12
|
default: "horizontal"
|
13
13
|
prop :icon, type: Playbook::Props::Boolean,
|
14
14
|
default: false
|
15
|
+
prop :show_icon, type: Playbook::Props::Boolean,
|
16
|
+
default: false
|
15
17
|
prop :variant, type: Playbook::Props::Enum,
|
16
18
|
values: %w[default tracker],
|
17
19
|
default: "default"
|
18
20
|
prop :color, type: Playbook::Props::Enum,
|
19
|
-
|
20
|
-
|
21
|
+
values: %w[primary info],
|
22
|
+
default: "primary"
|
21
23
|
def classname
|
22
24
|
generate_classname("pb_progress_step_kit", orientation, icon_class, variant_class, color_class)
|
23
25
|
end
|
@@ -25,7 +27,7 @@ module Playbook
|
|
25
27
|
private
|
26
28
|
|
27
29
|
def icon_class
|
28
|
-
icon === true ? "icon" : nil
|
30
|
+
icon === true || show_icon === true ? "icon" : nil
|
29
31
|
end
|
30
32
|
|
31
33
|
def variant_class
|
@@ -11,6 +11,12 @@ module Playbook
|
|
11
11
|
values: %w[complete active inactive hidden],
|
12
12
|
default: "inactive"
|
13
13
|
|
14
|
+
prop :icon, required: false, default: "check"
|
15
|
+
|
16
|
+
def name_icon
|
17
|
+
icon ? icon : "check"
|
18
|
+
end
|
19
|
+
|
14
20
|
def classname
|
15
21
|
generate_classname("pb_progress_step_item", status)
|
16
22
|
end
|
@@ -2,5 +2,17 @@
|
|
2
2
|
id: object.id,
|
3
3
|
data: object.data,
|
4
4
|
class: object.classname) do %>
|
5
|
-
|
5
|
+
|
6
|
+
<% case object.variant
|
7
|
+
when "updated" %>
|
8
|
+
<%= pb_rails("caption", props: { text: object.format_updated_string, size: 'xs', dark: object.dark }) %>
|
9
|
+
<% when "elapsed" %>
|
10
|
+
<%= pb_rails("caption", props: { text: object.format_updated_string, size: 'xs', dark: object.dark }) %>
|
11
|
+
<% else %>
|
12
|
+
<% if object.show_date %>
|
13
|
+
<%= pb_rails("caption", props: { text: object.format_datetime_string, size: 'xs', dark: object.dark }) %>
|
14
|
+
<% else %>
|
15
|
+
<%= pb_rails("caption", props: { text: object.format_time_string, size: 'xs', dark: object.dark }) %>
|
16
|
+
<% end %>
|
17
|
+
<% end %>
|
6
18
|
<% end %>
|
@@ -2,36 +2,112 @@
|
|
2
2
|
|
3
3
|
import React from 'react'
|
4
4
|
import classnames from 'classnames'
|
5
|
-
|
5
|
+
import DateTime from '../pb_kit/dateTime.js'
|
6
|
+
import { buildCss } from '../utilities/props'
|
6
7
|
import { Caption } from '../'
|
7
|
-
|
8
|
-
import { buildCss, buildDataProps } from '../utilities/props'
|
9
|
-
|
10
8
|
import { globalProps } from '../utilities/globalProps.js'
|
11
9
|
|
12
10
|
type TimestampProps = {
|
11
|
+
align?: "left" | "center" | "right",
|
12
|
+
className?: string | array<string>,
|
13
|
+
dark?: boolean,
|
14
|
+
data?: string,
|
15
|
+
text: string,
|
16
|
+
timestamp: string,
|
17
|
+
timezone: string,
|
13
18
|
id?: string,
|
14
|
-
|
15
|
-
|
16
|
-
|
19
|
+
showDate?: boolean,
|
20
|
+
showUser?: boolean,
|
21
|
+
showTimezone?: boolean,
|
22
|
+
variant?: "default" | "elapsed" | "updated"
|
17
23
|
}
|
18
24
|
|
19
25
|
const Timestamp = (props: TimestampProps) => {
|
20
|
-
const {
|
21
|
-
|
22
|
-
|
26
|
+
const {
|
27
|
+
align = 'left',
|
28
|
+
className,
|
29
|
+
dark = false,
|
30
|
+
text,
|
31
|
+
timestamp,
|
32
|
+
timezone,
|
33
|
+
showDate = true,
|
34
|
+
showUser = false,
|
35
|
+
showTimezone = false,
|
36
|
+
variant = 'default',
|
37
|
+
} = props
|
38
|
+
const classes = classnames(
|
39
|
+
buildCss('pb_timestamp_kit', align, {
|
40
|
+
dark: dark,
|
41
|
+
variant: variant,
|
42
|
+
}),
|
43
|
+
globalProps(props),
|
44
|
+
className
|
45
|
+
)
|
46
|
+
|
47
|
+
const currentYear = new Date().getFullYear().toString()
|
48
|
+
const dateTimestamp = new DateTime({ value: timestamp, zone: timezone })
|
49
|
+
const dateDisplay = dateTimestamp.toMonth() + ' ' + dateTimestamp.toDay()
|
50
|
+
const timeDisplay = dateTimestamp.toHour() + ':' + dateTimestamp.toMinute() + dateTimestamp.toMeridian()
|
51
|
+
|
52
|
+
var fullTimeDisplay = function fullTimeDisplay(dateTimestamp, timeDisplay, timezone, showTimezone) {
|
53
|
+
if (showTimezone == 'true' && timezone.length > 0) {
|
54
|
+
timeDisplay = timeDisplay + ' ' + dateTimestamp.toTimezone()
|
55
|
+
}
|
56
|
+
return timeDisplay
|
57
|
+
}
|
58
|
+
|
59
|
+
var fullDateDisplay = function fullDateDisplay(dateTimestamp, currentYear, dateDisplay, timezone, showTimezone) {
|
60
|
+
var fullDisplay = dateTimestamp.toMonth() + ' ' + dateTimestamp.toDay()
|
61
|
+
if (dateTimestamp.toYear() > currentYear) {
|
62
|
+
fullDisplay = fullDisplay + ', ' + dateTimestamp.toYear().toString()
|
63
|
+
}
|
64
|
+
return fullDisplay + ' \u00b7 ' + fullTimeDisplay(dateTimestamp, timeDisplay, timezone, showTimezone)
|
65
|
+
}
|
66
|
+
|
67
|
+
var fullElapsedDisplay = function fullElapsedDisplay(showUser, text, dateTimestamp){
|
68
|
+
var userDisplay = (showUser == 'true' && text.length > 0) ? ' by ' + text : ''
|
69
|
+
return 'Last updated' + userDisplay + ' ' + dateTimestamp.value.fromNow()
|
70
|
+
}
|
71
|
+
|
72
|
+
var fullUpdatedDisplay = function fullUpdatedDisplay(showUser, text, timeDisplay, timezone, showTimezone){
|
73
|
+
var userDisplay = (showUser == 'true' && text.length > 0) ? ' by ' + text : ''
|
74
|
+
return 'Last updated' + userDisplay + ' at ' + fullTimeDisplay(dateTimestamp, timeDisplay, timezone, showTimezone)
|
75
|
+
}
|
23
76
|
|
24
77
|
return (
|
25
|
-
<div
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
78
|
+
<div className={classes}>
|
79
|
+
<div className="pb_timestamp_kit">
|
80
|
+
<If condition={variant == 'updated'}>
|
81
|
+
<Caption
|
82
|
+
dark={dark}
|
83
|
+
size="xs"
|
84
|
+
text={fullUpdatedDisplay(showUser, text, timeDisplay, timezone, showTimezone)}
|
85
|
+
/>
|
86
|
+
</If>
|
87
|
+
<If condition={variant == 'elapsed'}>
|
88
|
+
<Caption
|
89
|
+
dark={dark}
|
90
|
+
size="xs"
|
91
|
+
text={fullElapsedDisplay(showUser, text, dateTimestamp)}
|
92
|
+
/>
|
93
|
+
</If>
|
94
|
+
<If condition={variant == 'default'}>
|
95
|
+
<If condition={showDate == 'true'}>
|
96
|
+
<Caption
|
97
|
+
dark={dark}
|
98
|
+
size="xs"
|
99
|
+
text={fullDateDisplay(dateTimestamp, currentYear, dateDisplay, timezone, showTimezone)}
|
100
|
+
/>
|
101
|
+
</If>
|
102
|
+
<If condition={showDate == 'false'}>
|
103
|
+
<Caption
|
104
|
+
dark={dark}
|
105
|
+
size="xs"
|
106
|
+
text={timeDisplay}
|
107
|
+
/>
|
108
|
+
</If>
|
109
|
+
</If>
|
110
|
+
</div>
|
35
111
|
</div>
|
36
112
|
)
|
37
113
|
}
|
@@ -1,5 +1,16 @@
|
|
1
1
|
@import "timestamp-mixins";
|
2
|
+
@import "../tokens/colors";
|
2
3
|
|
3
|
-
[class^=pb_timestamp_kit]
|
4
|
+
[class^=pb_timestamp_kit]{
|
4
5
|
@include pb_timestamp;
|
6
|
+
|
7
|
+
&[class*=_center] {
|
8
|
+
text-align: center;
|
9
|
+
}
|
10
|
+
&[class*=_right] {
|
11
|
+
text-align: right;
|
12
|
+
}
|
13
|
+
&[class*=_dark] {
|
14
|
+
color: $text_dk_default;
|
15
|
+
}
|
5
16
|
}
|
@@ -0,0 +1,69 @@
|
|
1
|
+
<%= pb_rails("timestamp", props: {
|
2
|
+
timestamp: DateTime.now,
|
3
|
+
show_date: false,
|
4
|
+
align: "left"
|
5
|
+
}) %>
|
6
|
+
|
7
|
+
<br>
|
8
|
+
|
9
|
+
<%= pb_rails("timestamp", props: {
|
10
|
+
timestamp: DateTime.now,
|
11
|
+
show_date: true,
|
12
|
+
align: "left"
|
13
|
+
}) %>
|
14
|
+
|
15
|
+
<br>
|
16
|
+
|
17
|
+
<%= pb_rails("timestamp", props: {
|
18
|
+
timestamp: DateTime.now + 4.years,
|
19
|
+
show_date: true,
|
20
|
+
align: "left"
|
21
|
+
}) %>
|
22
|
+
|
23
|
+
<br><br>
|
24
|
+
|
25
|
+
<%= pb_rails("timestamp", props: {
|
26
|
+
timestamp: DateTime.now,
|
27
|
+
show_date: false,
|
28
|
+
align: "center"
|
29
|
+
}) %>
|
30
|
+
|
31
|
+
<br>
|
32
|
+
|
33
|
+
<%= pb_rails("timestamp", props: {
|
34
|
+
timestamp: DateTime.now,
|
35
|
+
show_date: true,
|
36
|
+
align: "center"
|
37
|
+
}) %>
|
38
|
+
|
39
|
+
<br>
|
40
|
+
|
41
|
+
<%= pb_rails("timestamp", props: {
|
42
|
+
timestamp: DateTime.now + 4.years,
|
43
|
+
show_date: true,
|
44
|
+
align: "center"
|
45
|
+
}) %>
|
46
|
+
|
47
|
+
<br><br>
|
48
|
+
|
49
|
+
<%= pb_rails("timestamp", props: {
|
50
|
+
timestamp: DateTime.now,
|
51
|
+
show_date: false,
|
52
|
+
align: "right"
|
53
|
+
}) %>
|
54
|
+
|
55
|
+
<br>
|
56
|
+
|
57
|
+
<%= pb_rails("timestamp", props: {
|
58
|
+
timestamp: DateTime.now,
|
59
|
+
show_date: true,
|
60
|
+
align: "right"
|
61
|
+
}) %>
|
62
|
+
|
63
|
+
<br>
|
64
|
+
|
65
|
+
<%= pb_rails("timestamp", props: {
|
66
|
+
timestamp: DateTime.now + 4.years,
|
67
|
+
show_date: true,
|
68
|
+
align: "right"
|
69
|
+
}) %>
|
@@ -0,0 +1,91 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import Timestamp from '../_timestamp.jsx'
|
3
|
+
|
4
|
+
const TimestampAlign = (props) => {
|
5
|
+
return (
|
6
|
+
<div>
|
7
|
+
<Timestamp
|
8
|
+
align="left"
|
9
|
+
showDate="false"
|
10
|
+
timestamp={new Date().getTime()}
|
11
|
+
{...props}
|
12
|
+
/>
|
13
|
+
|
14
|
+
<br />
|
15
|
+
|
16
|
+
<Timestamp
|
17
|
+
align="left"
|
18
|
+
showDate="true"
|
19
|
+
timestamp={new Date().getTime()}
|
20
|
+
{...props}
|
21
|
+
/>
|
22
|
+
|
23
|
+
<br />
|
24
|
+
|
25
|
+
<Timestamp
|
26
|
+
align="left"
|
27
|
+
showDate="true"
|
28
|
+
timestamp={new Date((new Date()).getFullYear() + 4, (new Date().getMonth()), (new Date().getDate() + 1)).getTime()}
|
29
|
+
{...props}
|
30
|
+
/>
|
31
|
+
|
32
|
+
<br />
|
33
|
+
<br />
|
34
|
+
|
35
|
+
<Timestamp
|
36
|
+
align="center"
|
37
|
+
showDate="false"
|
38
|
+
timestamp={new Date().getTime()}
|
39
|
+
{...props}
|
40
|
+
/>
|
41
|
+
|
42
|
+
<br />
|
43
|
+
|
44
|
+
<Timestamp
|
45
|
+
align="center"
|
46
|
+
showDate="true"
|
47
|
+
timestamp={new Date().getTime()}
|
48
|
+
{...props}
|
49
|
+
/>
|
50
|
+
|
51
|
+
<br />
|
52
|
+
|
53
|
+
<Timestamp
|
54
|
+
align="center"
|
55
|
+
showDate="true"
|
56
|
+
timestamp={new Date((new Date()).getFullYear() + 4, (new Date().getMonth()), (new Date().getDate() + 1)).getTime()}
|
57
|
+
{...props}
|
58
|
+
/>
|
59
|
+
|
60
|
+
<br />
|
61
|
+
<br />
|
62
|
+
|
63
|
+
<Timestamp
|
64
|
+
align="right"
|
65
|
+
showDate="false"
|
66
|
+
timestamp={new Date().getTime()}
|
67
|
+
{...props}
|
68
|
+
/>
|
69
|
+
|
70
|
+
<br />
|
71
|
+
|
72
|
+
<Timestamp
|
73
|
+
align="right"
|
74
|
+
showDate="true"
|
75
|
+
timestamp={new Date().getTime()}
|
76
|
+
{...props}
|
77
|
+
/>
|
78
|
+
|
79
|
+
<br />
|
80
|
+
|
81
|
+
<Timestamp
|
82
|
+
align="right"
|
83
|
+
showDate="true"
|
84
|
+
timestamp={new Date((new Date()).getFullYear() + 4, (new Date().getMonth()), (new Date().getDate() + 1)).getTime()}
|
85
|
+
{...props}
|
86
|
+
/>
|
87
|
+
</div>
|
88
|
+
)
|
89
|
+
}
|
90
|
+
|
91
|
+
export default TimestampAlign
|