playbook_ui 14.5.0.pre.alpha.PLAY15814066 → 14.5.0.pre.alpha.javascriptassets3926
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_advanced_table/index.js +0 -60
- data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb +9 -1
- data/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.html.erb +9 -1
- data/app/pb_kits/playbook/pb_card/_card.tsx +1 -5
- data/app/pb_kits/playbook/pb_dialog/_dialog.tsx +1 -5
- data/app/pb_kits/playbook/pb_flex/_flex.tsx +1 -3
- data/app/pb_kits/playbook/pb_flex/_flex_item.tsx +2 -8
- data/app/pb_kits/playbook/pb_flex/flex_item.html.erb +6 -3
- data/app/pb_kits/playbook/pb_flex/flex_item.rb +2 -7
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +1 -9
- data/app/pb_kits/playbook/pb_form_pill/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_form_pill/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +228 -195
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +0 -3
- data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +0 -2
- data/app/pb_kits/playbook/pb_popover/_popover.tsx +1 -1
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +1 -4
- data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.tsx +1 -3
- data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +1 -3
- data/app/pb_kits/playbook/utilities/globalPropNames.mjs +0 -3
- data/app/pb_kits/playbook/utilities/globalProps.ts +2 -39
- data/dist/chunks/_typeahead-BYw0HEgO.js +22 -0
- data/dist/chunks/{_weekday_stacked-CaNCkN7U.js → _weekday_stacked-DumiyWjh.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/mark.js +1 -0
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/lib/playbook/kit_base.rb +0 -17
- data/lib/playbook/pb_doc_helper.rb +5 -5
- data/lib/playbook/version.rb +1 -1
- metadata +5 -13
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb +0 -19
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx +0 -27
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.md +0 -1
- data/app/pb_kits/playbook/pb_multi_level_select/context/index.tsx +0 -5
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.jsx +0 -105
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.md +0 -1
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.jsx +0 -106
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.md +0 -1
- data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select_options.tsx +0 -149
- data/dist/chunks/_typeahead-D8vYsn7T.js +0 -22
@@ -1,149 +0,0 @@
|
|
1
|
-
import React, {useContext} from "react";
|
2
|
-
import classnames from "classnames";
|
3
|
-
import MultiLevelSelectContext from "./context";
|
4
|
-
import { globalProps, GlobalProps } from "../utilities/globalProps";
|
5
|
-
import {
|
6
|
-
buildAriaProps,
|
7
|
-
buildCss,
|
8
|
-
buildDataProps,
|
9
|
-
buildHtmlProps,
|
10
|
-
} from "../utilities/props";
|
11
|
-
import Checkbox from "../pb_checkbox/_checkbox";
|
12
|
-
import Radio from "../pb_radio/_radio";
|
13
|
-
import CircleIconButton from "../pb_circle_icon_button/_circle_icon_button";
|
14
|
-
import Body from "../pb_body/_body";
|
15
|
-
|
16
|
-
type MultiLevelSelectOptionsProps = {
|
17
|
-
aria?: { [key: string]: string },
|
18
|
-
children?: React.ReactNode | ((item: any) => React.ReactNode),
|
19
|
-
className?: string,
|
20
|
-
dark?: boolean,
|
21
|
-
data?: { [key: string]: string },
|
22
|
-
htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
|
23
|
-
} & GlobalProps;
|
24
|
-
|
25
|
-
const MultiLevelSelectOptions = ({
|
26
|
-
children,
|
27
|
-
items,
|
28
|
-
...props
|
29
|
-
}: MultiLevelSelectOptionsProps) => {
|
30
|
-
const {
|
31
|
-
variant,
|
32
|
-
inputName,
|
33
|
-
renderNestedOptions,
|
34
|
-
isTreeRowExpanded,
|
35
|
-
handleToggleClick,
|
36
|
-
handleRadioButtonClick,
|
37
|
-
handledropdownItemClick,
|
38
|
-
filterItem,
|
39
|
-
} = useContext(MultiLevelSelectContext)
|
40
|
-
|
41
|
-
const {
|
42
|
-
aria = {},
|
43
|
-
className,
|
44
|
-
data = {},
|
45
|
-
htmlOptions = {},
|
46
|
-
} = props;
|
47
|
-
|
48
|
-
const ariaProps = buildAriaProps(aria);
|
49
|
-
const dataProps = buildDataProps(data);
|
50
|
-
const htmlProps = buildHtmlProps(htmlOptions);
|
51
|
-
const classes = classnames(
|
52
|
-
buildCss("pb_multi_level_select_options"),
|
53
|
-
globalProps(props),
|
54
|
-
className
|
55
|
-
);
|
56
|
-
|
57
|
-
return (
|
58
|
-
<ul
|
59
|
-
{...ariaProps}
|
60
|
-
{...dataProps}
|
61
|
-
{...htmlProps}
|
62
|
-
className={classes}
|
63
|
-
>
|
64
|
-
{Array.isArray(items) &&
|
65
|
-
items.map((item: { [key: string]: any }) => {
|
66
|
-
return (
|
67
|
-
<div key={item.id}>
|
68
|
-
<li className={"dropdown_item"}
|
69
|
-
data-name={item.id}
|
70
|
-
>
|
71
|
-
<div className="dropdown_item_checkbox_row">
|
72
|
-
{!item.parent_id && !item.children ? null : (
|
73
|
-
<div
|
74
|
-
key={
|
75
|
-
isTreeRowExpanded(item)
|
76
|
-
? "chevron-down"
|
77
|
-
: "chevron-right"
|
78
|
-
}
|
79
|
-
>
|
80
|
-
<CircleIconButton
|
81
|
-
className={
|
82
|
-
item.children && item.children.length > 0
|
83
|
-
? ""
|
84
|
-
: "toggle_icon"
|
85
|
-
}
|
86
|
-
icon={
|
87
|
-
isTreeRowExpanded(item)
|
88
|
-
? "chevron-down"
|
89
|
-
: "chevron-right"
|
90
|
-
}
|
91
|
-
onClick={(event: React.MouseEvent) =>
|
92
|
-
handleToggleClick(item.id, event)
|
93
|
-
}
|
94
|
-
variant="link"
|
95
|
-
/>
|
96
|
-
</div>
|
97
|
-
)}
|
98
|
-
{variant === "single" ? (
|
99
|
-
item.hideRadio ? (
|
100
|
-
<Body>{item.label}</Body>
|
101
|
-
) : (
|
102
|
-
<Radio
|
103
|
-
checked={item.checked}
|
104
|
-
id={`${item.id}-${item.label}`}
|
105
|
-
label={item.label}
|
106
|
-
name={inputName}
|
107
|
-
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
|
108
|
-
handleRadioButtonClick(e)
|
109
|
-
}
|
110
|
-
padding={item.children ? "none" : "xs"}
|
111
|
-
type="radio"
|
112
|
-
value={item.label}
|
113
|
-
/>
|
114
|
-
)
|
115
|
-
) : (
|
116
|
-
<Checkbox id={item.id}
|
117
|
-
text={item.label}
|
118
|
-
>
|
119
|
-
<input
|
120
|
-
checked={item.checked}
|
121
|
-
name={item.label}
|
122
|
-
onChange={(e) => {
|
123
|
-
handledropdownItemClick(e, !item.checked);
|
124
|
-
}}
|
125
|
-
type="checkbox"
|
126
|
-
value={item.label}
|
127
|
-
/>
|
128
|
-
</Checkbox>
|
129
|
-
)}
|
130
|
-
{/* Render children next to the checkbox */}
|
131
|
-
{children && (
|
132
|
-
typeof children === "function" ? children(item) : children
|
133
|
-
)}
|
134
|
-
</div>
|
135
|
-
{isTreeRowExpanded(item) &&
|
136
|
-
item.children &&
|
137
|
-
item.children.length > 0 &&
|
138
|
-
(variant === "single" || !filterItem) && (
|
139
|
-
<div>{renderNestedOptions(item.children)}</div>
|
140
|
-
)}
|
141
|
-
</li>
|
142
|
-
</div>
|
143
|
-
);
|
144
|
-
})}
|
145
|
-
</ul>
|
146
|
-
);
|
147
|
-
};
|
148
|
-
|
149
|
-
export default MultiLevelSelectOptions;
|