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.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_date/_date.tsx +8 -7
- data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.tsx +31 -45
- data/app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.tsx +3 -5
- data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.tsx +21 -24
- data/app/pb_kits/playbook/pb_date_time/_date_time.tsx +1 -1
- data/app/pb_kits/playbook/pb_date_time/dateTime.test.js +1 -1
- data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx +2 -2
- data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.test.js +1 -1
- data/app/pb_kits/playbook/pb_date_year_stacked/_date_year_stacked.tsx +8 -6
- data/app/pb_kits/playbook/pb_kit/dateTime.ts +67 -139
- data/app/pb_kits/playbook/pb_label_value/_label_value.tsx +31 -52
- data/app/pb_kits/playbook/pb_logistic/_logistic.jsx +120 -0
- data/app/pb_kits/playbook/pb_message/_message.tsx +25 -25
- data/app/pb_kits/playbook/pb_multi_level_select/_helper_functions.tsx +56 -27
- data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.scss +1 -1
- data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +10 -27
- data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb +4 -0
- data/app/pb_kits/playbook/pb_time/_time.tsx +11 -9
- data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.tsx +49 -46
- data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.tsx +6 -4
- data/app/pb_kits/playbook/pb_timestamp/_timestamp.tsx +10 -10
- data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.tsx +11 -8
- data/dist/playbook-rails.js +6 -6
- data/lib/playbook/version.rb +1 -1
- metadata +2 -1
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import classnames from "classnames";
|
|
3
|
+
import DateTime from "../pb_kit/dateTime";
|
|
3
4
|
import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
|
|
4
5
|
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:
|
|
30
|
-
const month =
|
|
31
|
-
const day =
|
|
29
|
+
const dateString = (value: DateTime) => {
|
|
30
|
+
const month = value.toMonthNum();
|
|
31
|
+
const day = value.toDay();
|
|
32
32
|
|
|
33
33
|
return ` · ${month}/${day}`;
|
|
34
34
|
};
|
|
@@ -52,6 +52,7 @@ 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 });
|
|
55
56
|
const variantClass = variant === "details" ? "details" : "";
|
|
56
57
|
const classes = classnames(
|
|
57
58
|
buildCss("pb_label_value_kit", variantClass),
|
|
@@ -61,81 +62,59 @@ const LabelValue = (props: LabelValueProps) => {
|
|
|
61
62
|
|
|
62
63
|
return (
|
|
63
64
|
<div
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
65
|
+
{...ariaProps}
|
|
66
|
+
{...dataProps}
|
|
67
|
+
className={classes}
|
|
68
|
+
id={id}
|
|
69
|
+
title={title}
|
|
69
70
|
>
|
|
70
|
-
<Caption dark={dark}
|
|
71
|
-
text={label}
|
|
72
|
-
/>
|
|
71
|
+
<Caption dark={dark} text={label} />
|
|
73
72
|
{variant === "details" ? (
|
|
74
|
-
<Flex inline
|
|
75
|
-
vertical="center"
|
|
76
|
-
>
|
|
73
|
+
<Flex inline vertical="center">
|
|
77
74
|
{icon && (
|
|
78
|
-
<Body color="light"
|
|
79
|
-
|
|
80
|
-
marginRight="xs"
|
|
81
|
-
>
|
|
82
|
-
<Icon dark={dark}
|
|
83
|
-
fixedWidth
|
|
84
|
-
icon={icon}
|
|
85
|
-
/>
|
|
75
|
+
<Body color="light" dark={dark} marginRight="xs">
|
|
76
|
+
<Icon dark={dark} fixedWidth icon={icon} />
|
|
86
77
|
</Body>
|
|
87
78
|
)}
|
|
88
79
|
{description && (
|
|
89
80
|
<Body
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
81
|
+
color="light"
|
|
82
|
+
dark={dark}
|
|
83
|
+
marginRight="xs"
|
|
84
|
+
text={description}
|
|
94
85
|
/>
|
|
95
86
|
)}
|
|
96
87
|
{active === true ? (
|
|
97
|
-
<Flex inline
|
|
98
|
-
vertical="center"
|
|
99
|
-
>
|
|
88
|
+
<Flex inline vertical="center">
|
|
100
89
|
{title && (
|
|
101
|
-
<Title dark={dark}
|
|
102
|
-
size={4}
|
|
103
|
-
text={title}
|
|
104
|
-
variant="link"
|
|
105
|
-
/>
|
|
90
|
+
<Title dark={dark} size={4} text={title} variant="link" />
|
|
106
91
|
)}
|
|
107
92
|
{date && (
|
|
108
93
|
<Title
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
94
|
+
dark={dark}
|
|
95
|
+
marginLeft="xs"
|
|
96
|
+
size={4}
|
|
97
|
+
text={" " + dateString(formattedDate)}
|
|
98
|
+
variant="link"
|
|
114
99
|
/>
|
|
115
100
|
)}
|
|
116
101
|
</Flex>
|
|
117
102
|
) : (
|
|
118
103
|
<>
|
|
119
|
-
{title && <Title dark={dark}
|
|
120
|
-
size={4}
|
|
121
|
-
text={title}
|
|
122
|
-
/>
|
|
123
|
-
}
|
|
104
|
+
{title && <Title dark={dark} size={4} text={title} />}
|
|
124
105
|
{date && (
|
|
125
106
|
<Title
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
107
|
+
dark={dark}
|
|
108
|
+
marginLeft="xs"
|
|
109
|
+
size={4}
|
|
110
|
+
text={" " + dateString(formattedDate)}
|
|
130
111
|
/>
|
|
131
112
|
)}
|
|
132
113
|
</>
|
|
133
114
|
)}
|
|
134
115
|
</Flex>
|
|
135
116
|
) : (
|
|
136
|
-
<Body dark={dark}
|
|
137
|
-
text={value}
|
|
138
|
-
/>
|
|
117
|
+
<Body dark={dark} text={value} />
|
|
139
118
|
)}
|
|
140
119
|
</div>
|
|
141
120
|
);
|
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
/* @flow */
|
|
2
|
+
|
|
3
|
+
import React from 'react'
|
|
4
|
+
import classnames from 'classnames'
|
|
5
|
+
|
|
6
|
+
import DateTime from '../pb_kit/dateTime'
|
|
7
|
+
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
|
|
8
|
+
import { globalProps } from '../utilities/globalProps'
|
|
9
|
+
|
|
10
|
+
import Body from '../pb_body/_body'
|
|
11
|
+
import Caption from '../pb_caption/_caption'
|
|
12
|
+
import Icon from '../pb_icon/_icon'
|
|
13
|
+
import Title from '../pb_title/_title'
|
|
14
|
+
|
|
15
|
+
const dateString = (value: DateTime) => {
|
|
16
|
+
const month = value.toMonthNum()
|
|
17
|
+
const day = value.toDay()
|
|
18
|
+
|
|
19
|
+
return ` · ${month}/${day}`
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
type LogisticProps = {
|
|
23
|
+
aria?: object,
|
|
24
|
+
className?: string,
|
|
25
|
+
dark?: boolean,
|
|
26
|
+
data?: object,
|
|
27
|
+
date: string,
|
|
28
|
+
id?: string,
|
|
29
|
+
link?: string,
|
|
30
|
+
projectName?: string,
|
|
31
|
+
projectNumber?: number,
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
const Logistic = (props: LogisticProps) => {
|
|
35
|
+
const { aria = {},
|
|
36
|
+
className,
|
|
37
|
+
dark = false,
|
|
38
|
+
data = {},
|
|
39
|
+
date,
|
|
40
|
+
id,
|
|
41
|
+
link,
|
|
42
|
+
projectName,
|
|
43
|
+
projectNumber } = props
|
|
44
|
+
|
|
45
|
+
const ariaProps = buildAriaProps(aria)
|
|
46
|
+
const dataProps = buildDataProps(data)
|
|
47
|
+
const formattedDate = new DateTime({ value: date })
|
|
48
|
+
const classes = classnames(
|
|
49
|
+
buildCss('pb_logistic_kit', { dark }),
|
|
50
|
+
globalProps(props),
|
|
51
|
+
className
|
|
52
|
+
)
|
|
53
|
+
|
|
54
|
+
return (
|
|
55
|
+
<div
|
|
56
|
+
{...ariaProps}
|
|
57
|
+
{...dataProps}
|
|
58
|
+
className={classes}
|
|
59
|
+
id={id}
|
|
60
|
+
>
|
|
61
|
+
<Body color="light">
|
|
62
|
+
<Caption text="Project" />
|
|
63
|
+
<Icon
|
|
64
|
+
fixedWidth
|
|
65
|
+
icon="home"
|
|
66
|
+
/>
|
|
67
|
+
|
|
68
|
+
{` ${projectNumber}`}
|
|
69
|
+
|
|
70
|
+
<Choose>
|
|
71
|
+
<When condition={link}>
|
|
72
|
+
<a
|
|
73
|
+
className="pb_logistic_kit_links"
|
|
74
|
+
href={link}
|
|
75
|
+
>
|
|
76
|
+
<Choose>
|
|
77
|
+
<When condition={date}>
|
|
78
|
+
<Title
|
|
79
|
+
size={4}
|
|
80
|
+
tag="span"
|
|
81
|
+
text={' ' + projectName + dateString(formattedDate)}
|
|
82
|
+
/>
|
|
83
|
+
</When>
|
|
84
|
+
<Otherwise>
|
|
85
|
+
<Title
|
|
86
|
+
size={4}
|
|
87
|
+
tag="span"
|
|
88
|
+
text={' ' + projectName}
|
|
89
|
+
/>
|
|
90
|
+
</Otherwise>
|
|
91
|
+
</Choose>
|
|
92
|
+
</a>
|
|
93
|
+
</When>
|
|
94
|
+
<Otherwise>
|
|
95
|
+
<Choose>
|
|
96
|
+
<When condition={date}>
|
|
97
|
+
<Title
|
|
98
|
+
dark={dark}
|
|
99
|
+
size={4}
|
|
100
|
+
tag="span"
|
|
101
|
+
text={' ' + projectName + dateString(formattedDate)}
|
|
102
|
+
/>
|
|
103
|
+
</When>
|
|
104
|
+
<Otherwise>
|
|
105
|
+
<Title
|
|
106
|
+
dark={dark}
|
|
107
|
+
size={4}
|
|
108
|
+
tag="span"
|
|
109
|
+
text={' ' + projectName}
|
|
110
|
+
/>
|
|
111
|
+
</Otherwise>
|
|
112
|
+
</Choose>
|
|
113
|
+
</Otherwise>
|
|
114
|
+
</Choose>
|
|
115
|
+
</Body>
|
|
116
|
+
</div>
|
|
117
|
+
)
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
export default Logistic
|
|
@@ -23,8 +23,8 @@ type MessageProps = {
|
|
|
23
23
|
id?: string,
|
|
24
24
|
label?: string,
|
|
25
25
|
message: string,
|
|
26
|
-
timestamp?:
|
|
27
|
-
timestampObject?:
|
|
26
|
+
timestamp?: string,
|
|
27
|
+
timestampObject?: string,
|
|
28
28
|
timezone?: string,
|
|
29
29
|
alignTimestamp?: string,
|
|
30
30
|
}
|
|
@@ -61,50 +61,50 @@ const Message = (props: MessageProps) => {
|
|
|
61
61
|
|
|
62
62
|
return (
|
|
63
63
|
<div
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
64
|
+
{...ariaProps}
|
|
65
|
+
{...dataProps}
|
|
66
|
+
className={classes}
|
|
67
|
+
id={id}
|
|
68
68
|
>
|
|
69
69
|
{shouldDisplayAvatar &&
|
|
70
70
|
<Avatar
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
71
|
+
imageUrl={avatarUrl}
|
|
72
|
+
name={avatarName}
|
|
73
|
+
size="xs"
|
|
74
|
+
status={avatarStatus}
|
|
75
75
|
/>
|
|
76
76
|
}
|
|
77
77
|
<div className="content_wrapper">
|
|
78
78
|
<Flex
|
|
79
|
-
|
|
80
|
-
|
|
79
|
+
justify={alignTimestamp === 'left' ? 'none' : 'between'}
|
|
80
|
+
orientation="row"
|
|
81
81
|
>
|
|
82
82
|
{label &&
|
|
83
83
|
<Title
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
84
|
+
className="message_title"
|
|
85
|
+
size={4}
|
|
86
|
+
text={label}
|
|
87
87
|
/>
|
|
88
88
|
}
|
|
89
89
|
<Timestamp
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
90
|
+
className={`pull-${alignTimestamp} ${timestampObject ? 'message_humanized_time' : null}`}
|
|
91
|
+
text={timestamp}
|
|
92
|
+
timestamp={''}
|
|
93
|
+
timezone={timezone}
|
|
94
94
|
/>
|
|
95
95
|
{timestampObject &&
|
|
96
96
|
<Timestamp
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
97
|
+
className={`pull-${alignTimestamp} message_timestamp`}
|
|
98
|
+
text={''}
|
|
99
|
+
timestamp={timestampObject}
|
|
100
|
+
timezone={timezone}
|
|
101
101
|
/>
|
|
102
102
|
}
|
|
103
103
|
</Flex>
|
|
104
104
|
{message &&
|
|
105
105
|
<Body
|
|
106
|
-
|
|
107
|
-
|
|
106
|
+
className="pb_message_body"
|
|
107
|
+
text={message}
|
|
108
108
|
/>
|
|
109
109
|
}
|
|
110
110
|
{children}
|
|
@@ -6,11 +6,11 @@ export const getAncestorsOfUnchecked = (
|
|
|
6
6
|
if (item.parent_id) {
|
|
7
7
|
const ancestor = filterFormattedDataById(data, item.parent_id);
|
|
8
8
|
ancestor[0].checked = false;
|
|
9
|
-
ancestor[0].parent_id && getAncestorsOfUnchecked(data, ancestor[0])
|
|
9
|
+
ancestor[0].parent_id && getAncestorsOfUnchecked(data, ancestor[0]);
|
|
10
10
|
}
|
|
11
11
|
return data;
|
|
12
12
|
};
|
|
13
|
-
|
|
13
|
+
|
|
14
14
|
//function is going over formattedData and returning all objects that match the
|
|
15
15
|
//id of the clicked item from the dropdown
|
|
16
16
|
export const filterFormattedDataById = (
|
|
@@ -20,9 +20,9 @@ export const filterFormattedDataById = (
|
|
|
20
20
|
const matched: { [key: string]: any }[] = [];
|
|
21
21
|
const recursiveSearch = (data: { [key: string]: any }[], term: string) => {
|
|
22
22
|
for (const item of data) {
|
|
23
|
-
if (item.id.toLowerCase() ===
|
|
23
|
+
if (item.id.toLowerCase() === term.toLowerCase()) {
|
|
24
24
|
matched.push(item);
|
|
25
|
-
return
|
|
25
|
+
return;
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
if (item.children && item.children.length > 0) {
|
|
@@ -75,24 +75,29 @@ export const getCheckedItems = (
|
|
|
75
75
|
});
|
|
76
76
|
return checkedItems;
|
|
77
77
|
};
|
|
78
|
-
|
|
79
|
-
export const getDefaultCheckedItems = (treeData:{ [key: string]: any }[]) => {
|
|
78
|
+
|
|
79
|
+
export const getDefaultCheckedItems = (treeData: { [key: string]: any }[]) => {
|
|
80
80
|
const checkedDefault: { [key: string]: any }[] = [];
|
|
81
81
|
|
|
82
|
-
const traverseTree = (items:{ [key: string]: any }[]) => {
|
|
82
|
+
const traverseTree = (items: { [key: string]: any }[]) => {
|
|
83
83
|
if (!Array.isArray(items)) {
|
|
84
84
|
return;
|
|
85
85
|
}
|
|
86
|
-
items.forEach((item:{ [key: string]: any }) => {
|
|
86
|
+
items.forEach((item: { [key: string]: any }) => {
|
|
87
87
|
if (item.checked) {
|
|
88
88
|
if (item.children && item.children.length > 0) {
|
|
89
|
-
const uncheckedChildren = item.children.filter(
|
|
89
|
+
const uncheckedChildren = item.children.filter(
|
|
90
|
+
(child: { [key: string]: any }) => !child.checked
|
|
91
|
+
);
|
|
90
92
|
if (uncheckedChildren.length === 0) {
|
|
91
93
|
checkedDefault.push(item);
|
|
92
94
|
return;
|
|
93
95
|
}
|
|
94
96
|
} else {
|
|
95
|
-
const parent = items.find(
|
|
97
|
+
const parent = items.find(
|
|
98
|
+
(parentItem: { [key: string]: any }) =>
|
|
99
|
+
parentItem.id === item.parentId
|
|
100
|
+
);
|
|
96
101
|
if (!parent || !parent.checked) {
|
|
97
102
|
checkedDefault.push(item);
|
|
98
103
|
}
|
|
@@ -112,23 +117,47 @@ export const getDefaultCheckedItems = (treeData:{ [key: string]: any }[]) => {
|
|
|
112
117
|
|
|
113
118
|
export const recursiveCheckParent = (
|
|
114
119
|
item: { [key: string]: any },
|
|
115
|
-
data:any
|
|
120
|
+
data: any
|
|
116
121
|
) => {
|
|
117
122
|
if (item.parent_id !== null) {
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
123
|
+
const parent = filterFormattedDataById(data, item.parent_id);
|
|
124
|
+
const allChildrenChecked = parent[0].children.every(
|
|
125
|
+
(child: { [key: string]: any }) => child.checked
|
|
126
|
+
);
|
|
127
|
+
if (allChildrenChecked) {
|
|
128
|
+
parent[0].checked = true;
|
|
129
|
+
const parentHasParent = parent[0].parent_id !== null;
|
|
130
|
+
if (parentHasParent) {
|
|
131
|
+
recursiveCheckParent(parent[0], data);
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
return data;
|
|
136
|
+
};
|
|
137
|
+
|
|
138
|
+
export const getExpandedItems = (treeData: { [key: string]: string }[]) => {
|
|
139
|
+
let expandedItems: any[] = [];
|
|
140
|
+
|
|
141
|
+
const traverse = (items: string | any[], ancestors: any[] = []) => {
|
|
142
|
+
for (let i = 0; i < items.length; i++) {
|
|
143
|
+
const item = items[i];
|
|
144
|
+
const itemAncestors = [...ancestors, item];
|
|
145
|
+
|
|
146
|
+
if (item.expanded) {
|
|
147
|
+
expandedItems.push(item.id);
|
|
148
|
+
}
|
|
149
|
+
if (Array.isArray(item.children)) {
|
|
150
|
+
const hasCheckedChildren = item.children.some(
|
|
151
|
+
(child: { [key: string]: string }) => child.checked
|
|
152
|
+
);
|
|
153
|
+
if (hasCheckedChildren) {
|
|
154
|
+
expandedItems.push(...itemAncestors.map((ancestor) => ancestor.id));
|
|
155
|
+
}
|
|
156
|
+
traverse(item.children, itemAncestors);
|
|
157
|
+
}
|
|
130
158
|
}
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
159
|
+
};
|
|
160
|
+
|
|
161
|
+
traverse(treeData);
|
|
162
|
+
return expandedItems;
|
|
163
|
+
};
|
|
@@ -15,6 +15,7 @@ import {
|
|
|
15
15
|
getCheckedItems,
|
|
16
16
|
getDefaultCheckedItems,
|
|
17
17
|
recursiveCheckParent,
|
|
18
|
+
getExpandedItems,
|
|
18
19
|
} from "./_helper_functions"
|
|
19
20
|
|
|
20
21
|
type MultiLevelSelectProps = {
|
|
@@ -22,6 +23,7 @@ type MultiLevelSelectProps = {
|
|
|
22
23
|
className?: string
|
|
23
24
|
data?: { [key: string]: string }
|
|
24
25
|
id?: string
|
|
26
|
+
inputDisplay?: "pills" | "none"
|
|
25
27
|
name?: string
|
|
26
28
|
returnAllSelected?: boolean
|
|
27
29
|
treeData?: { [key: string]: string }[]
|
|
@@ -34,6 +36,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
|
|
|
34
36
|
className,
|
|
35
37
|
data = {},
|
|
36
38
|
id,
|
|
39
|
+
inputDisplay = "pills",
|
|
37
40
|
name,
|
|
38
41
|
returnAllSelected = false,
|
|
39
42
|
treeData,
|
|
@@ -50,26 +53,6 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
|
|
|
50
53
|
|
|
51
54
|
const dropdownRef = useRef(null)
|
|
52
55
|
|
|
53
|
-
|
|
54
|
-
const getExpandedItems = (treeData: { [key: string]: string }[]) => {
|
|
55
|
-
let expandedItems: any[] = [];
|
|
56
|
-
|
|
57
|
-
const traverse = (items: string | any[]) => {
|
|
58
|
-
for (let i = 0; i < items.length; i++) {
|
|
59
|
-
const item = items[i];
|
|
60
|
-
if (item.expanded) {
|
|
61
|
-
expandedItems.push(item.id);
|
|
62
|
-
}
|
|
63
|
-
if (Array.isArray(item.children)) {
|
|
64
|
-
traverse(item.children);
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
traverse(treeData);
|
|
70
|
-
return expandedItems;
|
|
71
|
-
}
|
|
72
|
-
|
|
73
56
|
//state for whether dropdown is open or closed
|
|
74
57
|
const [isClosed, setIsClosed] = useState(true)
|
|
75
58
|
//state from onchange for textinput, to use for filtering to create typeahead
|
|
@@ -174,8 +157,6 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
|
|
|
174
157
|
return tree
|
|
175
158
|
}
|
|
176
159
|
|
|
177
|
-
|
|
178
|
-
|
|
179
160
|
//function to map over data and add parent_id + depth property to each item
|
|
180
161
|
const addCheckedAndParentProperty = (
|
|
181
162
|
treeData: { [key: string]: any }[],
|
|
@@ -331,7 +312,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
|
|
|
331
312
|
))
|
|
332
313
|
: null}
|
|
333
314
|
|
|
334
|
-
{returnedArray.length !== 0 && returnAllSelected
|
|
315
|
+
{returnedArray.length !== 0 && inputDisplay === "pills" && returnAllSelected
|
|
335
316
|
? returnedArray.map((item, index) => (
|
|
336
317
|
<FormPill
|
|
337
318
|
key={index}
|
|
@@ -342,7 +323,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
|
|
|
342
323
|
))
|
|
343
324
|
: null}
|
|
344
325
|
{!returnAllSelected &&
|
|
345
|
-
defaultReturn.length !== 0 &&
|
|
326
|
+
defaultReturn.length !== 0 && inputDisplay === "pills" ?
|
|
346
327
|
defaultReturn.map((item, index) => (
|
|
347
328
|
<FormPill
|
|
348
329
|
key={index}
|
|
@@ -350,9 +331,11 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
|
|
|
350
331
|
size='small'
|
|
351
332
|
onClick={(event: any) => handlePillClose(event, item)}
|
|
352
333
|
/>
|
|
353
|
-
))
|
|
354
|
-
|
|
355
|
-
|
|
334
|
+
))
|
|
335
|
+
: null
|
|
336
|
+
}
|
|
337
|
+
{returnedArray.length !== 0 && returnAllSelected && inputDisplay === "pills" && <br />}
|
|
338
|
+
{defaultReturn.length !== 0 && !returnAllSelected && inputDisplay === "pills" && <br />}
|
|
356
339
|
<input
|
|
357
340
|
id='multiselect_input'
|
|
358
341
|
onChange={(e) => {
|
|
@@ -9,6 +9,9 @@ module Playbook
|
|
|
9
9
|
default: []
|
|
10
10
|
prop :return_all_selected, type: Playbook::Props::Boolean,
|
|
11
11
|
default: false
|
|
12
|
+
prop :input_display, type: Playbook::Props::Enum,
|
|
13
|
+
values: %w[pills none],
|
|
14
|
+
default: "pills"
|
|
12
15
|
|
|
13
16
|
def classname
|
|
14
17
|
generate_classname("pb_multi_level_select")
|
|
@@ -17,6 +20,7 @@ module Playbook
|
|
|
17
20
|
def multi_level_select_options
|
|
18
21
|
{
|
|
19
22
|
id: id,
|
|
23
|
+
inputDisplay: input_display,
|
|
20
24
|
name: name,
|
|
21
25
|
treeData: tree_data,
|
|
22
26
|
returnAllSelected: return_all_selected,
|
|
@@ -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 } from "../utilities/props";
|
|
5
6
|
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:
|
|
16
|
+
date: string;
|
|
17
17
|
dark?: boolean;
|
|
18
18
|
id?: string;
|
|
19
19
|
showIcon?: boolean;
|
|
@@ -41,6 +41,8 @@ const Time = (props: TimeProps) => {
|
|
|
41
41
|
className
|
|
42
42
|
);
|
|
43
43
|
|
|
44
|
+
const dateTimestamp = new DateTime({ value: date, zone: timeZone });
|
|
45
|
+
|
|
44
46
|
return (
|
|
45
47
|
<div className={classes}>
|
|
46
48
|
{showIcon && (
|
|
@@ -68,18 +70,18 @@ const Time = (props: TimeProps) => {
|
|
|
68
70
|
)
|
|
69
71
|
)}
|
|
70
72
|
|
|
71
|
-
<time dateTime={date
|
|
73
|
+
<time dateTime={date}>
|
|
72
74
|
<span>
|
|
73
75
|
{unstyled
|
|
74
76
|
? (
|
|
75
77
|
<>
|
|
76
78
|
<span>
|
|
77
|
-
{
|
|
79
|
+
{dateTimestamp.toTimeWithMeridian()}
|
|
78
80
|
</span>
|
|
79
81
|
{" "}
|
|
80
82
|
{showTimezone && (
|
|
81
83
|
<span>
|
|
82
|
-
{
|
|
84
|
+
{dateTimestamp.toTimezone()}
|
|
83
85
|
</span>
|
|
84
86
|
)}
|
|
85
87
|
</>
|
|
@@ -90,13 +92,13 @@ const Time = (props: TimeProps) => {
|
|
|
90
92
|
<Body
|
|
91
93
|
className="pb_time"
|
|
92
94
|
tag="span"
|
|
93
|
-
text={
|
|
95
|
+
text={dateTimestamp.toTimeWithMeridian()}
|
|
94
96
|
/>{" "}
|
|
95
97
|
{showTimezone && (
|
|
96
98
|
<Body
|
|
97
99
|
color="light"
|
|
98
100
|
tag="span"
|
|
99
|
-
text={
|
|
101
|
+
text={dateTimestamp.toTimezone()}
|
|
100
102
|
/>
|
|
101
103
|
)}
|
|
102
104
|
</>
|
|
@@ -106,13 +108,13 @@ const Time = (props: TimeProps) => {
|
|
|
106
108
|
<Caption
|
|
107
109
|
color="light"
|
|
108
110
|
tag="span"
|
|
109
|
-
text={
|
|
111
|
+
text={dateTimestamp.toTimeWithMeridian()}
|
|
110
112
|
/>{" "}
|
|
111
113
|
{showTimezone && (
|
|
112
114
|
<Caption
|
|
113
115
|
color="light"
|
|
114
116
|
tag="span"
|
|
115
|
-
text={
|
|
117
|
+
text={dateTimestamp.toTimezone()}
|
|
116
118
|
/>
|
|
117
119
|
)}
|
|
118
120
|
</>
|