playbook_ui 9.9.0.alpha.inline1 → 9.9.0
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_badge/_badge.jsx +1 -26
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.jsx +1 -6
- data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.js +0 -3
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.jsx +2 -12
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss +0 -19
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_user.html.erb +5 -4
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_user.jsx +6 -2
- 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_form_pill/form_pill.html.erb +1 -1
- data/app/pb_kits/playbook/pb_form_pill/form_pill.rb +0 -5
- data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.jsx +0 -10
- data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.scss +0 -61
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml +0 -4
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/index.js +0 -2
- data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.rb +2 -9
- data/app/pb_kits/playbook/pb_text_input/_text_input.jsx +0 -3
- data/app/pb_kits/playbook/pb_text_input/_text_input.scss +0 -8
- data/app/pb_kits/playbook/pb_text_input/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_text_input/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_text_input/text_input.rb +1 -7
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.jsx +2 -11
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +0 -23
- data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.jsx +11 -23
- data/app/pb_kits/playbook/pb_typeahead/components/Placeholder.jsx +4 -17
- data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +0 -4
- data/app/pb_kits/playbook/pb_typeahead/docs/index.js +5 -7
- data/app/pb_kits/playbook/pb_typeahead/typeahead.html.erb +1 -1
- data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +2 -18
- data/lib/playbook/version.rb +1 -1
- metadata +3 -15
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_size.html.erb +0 -13
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_size.jsx +0 -25
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_inline.html.erb +0 -6
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_inline.jsx +0 -16
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_bottom.html.erb +0 -4
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_bottom.jsx +0 -14
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_inline.html.erb +0 -5
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_inline.jsx +0 -22
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_inline.html.erb +0 -36
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_inline.jsx +0 -43
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.html.erb +0 -35
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.jsx +0 -44
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: cc6cf85248c6d0e0b9c74d63c9d1dffa2a99d8e5b8d1010a8b4622829fa77d66
|
4
|
+
data.tar.gz: dae909122997e3eea81a47c6b5b9260bb84d87316c82cc70b351bec7a75d4ad7
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 596e69c28e26d8ddcafc2d1006e8f72f56458a9a8eacc4811a918e0124ddffed05c75e61a8834630d041d742e1dd66d8cd97870b5b1d4ef74e7ce2b9b8f30d09
|
7
|
+
data.tar.gz: 9a71dd4b52c1da10cd03a288accf3c76e18dd8bc71aebe3e2818c7f27763cd65e0b069d9103c95c5d8cad56ec96411340419a3f729b139758c172d8628e6c8a9
|
@@ -3,7 +3,6 @@
|
|
3
3
|
import React from 'react'
|
4
4
|
import classnames from 'classnames'
|
5
5
|
import { globalProps } from '../utilities/globalProps.js'
|
6
|
-
import { Icon } from '../'
|
7
6
|
|
8
7
|
import {
|
9
8
|
buildAriaProps,
|
@@ -14,15 +13,8 @@ import {
|
|
14
13
|
type BadgeProps = {
|
15
14
|
aria?: object,
|
16
15
|
className?: string,
|
17
|
-
closeProps?: {
|
18
|
-
onClick?: EventHandler,
|
19
|
-
onMouseDown?: EventHandler,
|
20
|
-
onTouchEnd?: EventHandler,
|
21
|
-
},
|
22
16
|
data?: object,
|
23
17
|
id?: string,
|
24
|
-
removeIcon?: Boolean,
|
25
|
-
removeOnClick?: EventHandler,
|
26
18
|
rounded?: boolean,
|
27
19
|
text?: string,
|
28
20
|
variant?: "error" | "info" | "neutral" | "primary" | "success" | "warning",
|
@@ -31,11 +23,8 @@ const Badge = (props: BadgeProps) => {
|
|
31
23
|
const {
|
32
24
|
aria = {},
|
33
25
|
className,
|
34
|
-
closeProps = {},
|
35
26
|
data = {},
|
36
27
|
id,
|
37
|
-
removeIcon = false,
|
38
|
-
removeOnClick = () => {},
|
39
28
|
rounded = false,
|
40
29
|
text,
|
41
30
|
variant = 'neutral',
|
@@ -55,21 +44,7 @@ const Badge = (props: BadgeProps) => {
|
|
55
44
|
className={css}
|
56
45
|
id={id}
|
57
46
|
>
|
58
|
-
<span>
|
59
|
-
{text}
|
60
|
-
<If condition={removeIcon}>
|
61
|
-
<span
|
62
|
-
onClick={removeOnClick}
|
63
|
-
style={{ cursor: 'pointer' }}
|
64
|
-
{...closeProps}
|
65
|
-
>
|
66
|
-
<Icon
|
67
|
-
fixedWidth
|
68
|
-
icon="times"
|
69
|
-
/>
|
70
|
-
</span>
|
71
|
-
</If>
|
72
|
-
</span>
|
47
|
+
<span>{text}</span>
|
73
48
|
</div>
|
74
49
|
)
|
75
50
|
}
|
@@ -25,8 +25,6 @@ type DatePickerProps = {
|
|
25
25
|
id?: String,
|
26
26
|
inputAria?: object,
|
27
27
|
inputData?: object,
|
28
|
-
inputOnChange?: (String) => void,
|
29
|
-
inputValue?: any,
|
30
28
|
label?: String,
|
31
29
|
maxDate: String,
|
32
30
|
minDate: String,
|
@@ -57,8 +55,6 @@ const DatePicker = (props: DatePickerProps) => {
|
|
57
55
|
id,
|
58
56
|
inputAria,
|
59
57
|
inputData,
|
60
|
-
inputOnChange,
|
61
|
-
inputValue,
|
62
58
|
label = 'Date Picker',
|
63
59
|
maxDate,
|
64
60
|
minDate,
|
@@ -118,6 +114,7 @@ const DatePicker = (props: DatePickerProps) => {
|
|
118
114
|
className={classes}
|
119
115
|
id={id}
|
120
116
|
>
|
117
|
+
{className}
|
121
118
|
<div className="input_wrapper">
|
122
119
|
<TextInput
|
123
120
|
aria={inputAria}
|
@@ -129,9 +126,7 @@ const DatePicker = (props: DatePickerProps) => {
|
|
129
126
|
id={pickerId}
|
130
127
|
label={hideLabel ? null : label}
|
131
128
|
name={name}
|
132
|
-
onChange={inputOnChange}
|
133
129
|
placeholder={placeholder}
|
134
|
-
value={inputValue}
|
135
130
|
/>
|
136
131
|
<If condition={!hideIcon}>
|
137
132
|
<div
|
@@ -166,9 +166,6 @@ const datePickerHelper = (config) => {
|
|
166
166
|
picker.input.style.caretColor = 'transparent'
|
167
167
|
picker.input.style.cursor = 'pointer'
|
168
168
|
}
|
169
|
-
|
170
|
-
// Fix event bubbling bug on wrapper
|
171
|
-
document.querySelector(`#${pickerId}`).parentElement.addEventListener('click', (e) => e.stopPropagation())
|
172
169
|
}
|
173
170
|
|
174
171
|
export default datePickerHelper
|
@@ -14,7 +14,6 @@ type FormPillProps = {
|
|
14
14
|
onClick?: EventHandler,
|
15
15
|
avatar?: boolean,
|
16
16
|
avatarUrl?: string,
|
17
|
-
size?: string,
|
18
17
|
closeProps?: {
|
19
18
|
onClick?: EventHandler,
|
20
19
|
onMouseDown?: EventHandler,
|
@@ -22,20 +21,11 @@ type FormPillProps = {
|
|
22
21
|
},
|
23
22
|
}
|
24
23
|
const FormPill = (props: FormPillProps) => {
|
25
|
-
const {
|
26
|
-
className,
|
27
|
-
text,
|
28
|
-
name,
|
29
|
-
onClick = () => {},
|
30
|
-
avatarUrl,
|
31
|
-
closeProps = {},
|
32
|
-
size = '',
|
33
|
-
} = props
|
24
|
+
const { className, text, name, onClick = () => {}, avatarUrl, closeProps = {} } = props
|
34
25
|
const css = classnames(
|
35
26
|
`pb_form_pill_kit_${'primary'}`,
|
36
27
|
globalProps(props),
|
37
|
-
className
|
38
|
-
size === 'small' ? 'small' : null,
|
28
|
+
className
|
39
29
|
)
|
40
30
|
return (
|
41
31
|
<div className={css}>
|
@@ -51,23 +51,4 @@ $form_pill_colors: (
|
|
51
51
|
}
|
52
52
|
}
|
53
53
|
}
|
54
|
-
&.small {
|
55
|
-
height: fit-content;
|
56
|
-
height: -moz-fit-content;
|
57
|
-
.pb_form_pill_text, .pb_form_pill_close, .pb_form_pill_tag {
|
58
|
-
font-size: 16px;
|
59
|
-
font-weight: 400;
|
60
|
-
}
|
61
|
-
.pb_form_pill_text, .pb_form_pill_tag {
|
62
|
-
line-height: 1.7;
|
63
|
-
padding-left: $space_xs;
|
64
|
-
padding-right: 2px;
|
65
|
-
}
|
66
|
-
[class^=pb_avatar_kit], [class^=pb_avatar_kit] .avatar_wrapper {
|
67
|
-
width: 20px;
|
68
|
-
height: 20px;
|
69
|
-
flex-basis: 20px;
|
70
|
-
&::before { line-height: 21px; }
|
71
|
-
}
|
72
|
-
}
|
73
54
|
}
|
@@ -1,11 +1,12 @@
|
|
1
1
|
<%= pb_rails("form_pill", props: {
|
2
2
|
name: "Anna Black",
|
3
3
|
avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
|
4
|
-
}) %>
|
5
4
|
|
6
|
-
|
7
|
-
|
5
|
+
}) %>
|
6
|
+
|
7
|
+
<br>
|
8
|
+
<br>
|
8
9
|
|
9
10
|
<%= pb_rails("form_pill", props: {
|
10
11
|
name: "Anna Black",
|
11
|
-
}) %>
|
12
|
+
}) %>
|
@@ -8,14 +8,18 @@ const FormPillDefault = (props) => {
|
|
8
8
|
<FormPill
|
9
9
|
avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
|
10
10
|
name="Anna Black"
|
11
|
-
onClick={() =>
|
11
|
+
onClick={() => {
|
12
|
+
alert('Click!')
|
13
|
+
}}
|
12
14
|
{...props}
|
13
15
|
/>
|
14
16
|
<br />
|
15
17
|
<br />
|
16
18
|
<FormPill
|
17
19
|
name="Anna Black"
|
18
|
-
onClick={() =>
|
20
|
+
onClick={() => {
|
21
|
+
alert('Click!')
|
22
|
+
}}
|
19
23
|
{...props}
|
20
24
|
/>
|
21
25
|
</div>
|
@@ -6,7 +6,6 @@ module Playbook
|
|
6
6
|
prop :avatar_url
|
7
7
|
prop :name
|
8
8
|
prop :text
|
9
|
-
prop :size
|
10
9
|
|
11
10
|
def classname
|
12
11
|
generate_classname("pb_form_pill_kit", "primary", name, text)
|
@@ -15,10 +14,6 @@ module Playbook
|
|
15
14
|
def display_text
|
16
15
|
name.downcase
|
17
16
|
end
|
18
|
-
|
19
|
-
def size_class
|
20
|
-
size == "small" ? " small" : ""
|
21
|
-
end
|
22
17
|
end
|
23
18
|
end
|
24
19
|
end
|
@@ -9,12 +9,10 @@ import { buildAriaProps, buildDataProps } from '../utilities/props'
|
|
9
9
|
|
10
10
|
type RichTextEditorProps = {
|
11
11
|
aria?: object,
|
12
|
-
toolbarBottom?: Boolean,
|
13
12
|
className?: string,
|
14
13
|
data?: object,
|
15
14
|
focus?: boolean,
|
16
15
|
id?: string,
|
17
|
-
inline?: boolean,
|
18
16
|
name?: string,
|
19
17
|
onChange: (string) => void,
|
20
18
|
placeholder?: string,
|
@@ -27,12 +25,10 @@ type RichTextEditorProps = {
|
|
27
25
|
const RichTextEditor = (props: RichTextEditorProps) => {
|
28
26
|
const {
|
29
27
|
aria = {},
|
30
|
-
toolbarBottom = false,
|
31
28
|
className,
|
32
29
|
data = {},
|
33
30
|
focus = false,
|
34
31
|
id,
|
35
|
-
inline = false,
|
36
32
|
name,
|
37
33
|
onChange,
|
38
34
|
placeholder,
|
@@ -81,8 +77,6 @@ const RichTextEditor = (props: RichTextEditorProps) => {
|
|
81
77
|
blockCodeButton.hidden = type == 'inline'
|
82
78
|
inlineCodeButton.hidden = type == 'block'
|
83
79
|
})
|
84
|
-
|
85
|
-
if (toolbarBottom) editor.element.after(toolbarElement)
|
86
80
|
})
|
87
81
|
|
88
82
|
trixRef.current.addEventListener('trix-change', (event) => {
|
@@ -109,8 +103,6 @@ const RichTextEditor = (props: RichTextEditorProps) => {
|
|
109
103
|
const SimpleClass = simple ? 'simple' : ''
|
110
104
|
const FocusClass = focus ? 'focus-editor-targets' : ''
|
111
105
|
const StickyClass = sticky ? 'sticky' : ''
|
112
|
-
const InlineClass = inline ? 'inline' : ''
|
113
|
-
const ToolbarBottomClass = toolbarBottom ? 'toolbar-bottom' : ''
|
114
106
|
const css = classnames(globalProps(props), className)
|
115
107
|
|
116
108
|
return (
|
@@ -122,8 +114,6 @@ const RichTextEditor = (props: RichTextEditorProps) => {
|
|
122
114
|
SimpleClass,
|
123
115
|
FocusClass,
|
124
116
|
StickyClass,
|
125
|
-
InlineClass,
|
126
|
-
ToolbarBottomClass,
|
127
117
|
css
|
128
118
|
)}
|
129
119
|
>
|
@@ -5,7 +5,6 @@
|
|
5
5
|
@import "../tokens/typography";
|
6
6
|
@import "../tokens/opacity";
|
7
7
|
@import "../tokens/spacing";
|
8
|
-
@import "../tokens/transition";
|
9
8
|
@import "../pb_icon/icon";
|
10
9
|
@import "./trix_styles";
|
11
10
|
|
@@ -229,64 +228,4 @@
|
|
229
228
|
color: $white;
|
230
229
|
}
|
231
230
|
}
|
232
|
-
&.toolbar-bottom {
|
233
|
-
trix-editor {
|
234
|
-
border-top-left-radius: 6px;
|
235
|
-
border-top-right-radius: 6px;
|
236
|
-
border-bottom: none;
|
237
|
-
border-bottom-left-radius: 0;
|
238
|
-
border-bottom-right-radius: 0;
|
239
|
-
&:empty:not(:focus)::before {
|
240
|
-
color: $neutral !important;
|
241
|
-
}
|
242
|
-
}
|
243
|
-
trix-toolbar .trix-button-row {
|
244
|
-
border-top: none;
|
245
|
-
border-top-left-radius: 0;
|
246
|
-
border-top-right-radius: 0;
|
247
|
-
border-bottom: 1px solid $border_light;
|
248
|
-
border-bottom-left-radius: 6px;
|
249
|
-
border-bottom-right-radius: 6px;
|
250
|
-
}
|
251
|
-
trix-toolbar {
|
252
|
-
display: grid;
|
253
|
-
}
|
254
|
-
&:focus, &:focus-within {
|
255
|
-
trix-toolbar .trix-button-row {
|
256
|
-
@include transition_default;
|
257
|
-
border-color: $primary;
|
258
|
-
}
|
259
|
-
}
|
260
|
-
}
|
261
|
-
&.inline {
|
262
|
-
&:hover {
|
263
|
-
trix-editor {
|
264
|
-
@include transition_default;
|
265
|
-
border-color: $border_light;
|
266
|
-
background-color: $white;
|
267
|
-
&+ trix-toolbar .trix-button-row {
|
268
|
-
transition: all 0.3s ease-in-out 0s;
|
269
|
-
opacity: 100;
|
270
|
-
}
|
271
|
-
}
|
272
|
-
}
|
273
|
-
trix-editor {
|
274
|
-
@include transition_default;
|
275
|
-
border-color: transparent;
|
276
|
-
background-color: transparent;
|
277
|
-
&+ trix-toolbar .trix-button-row {
|
278
|
-
transition: all 0.3s ease-in-out 0s;
|
279
|
-
opacity: 0;
|
280
|
-
}
|
281
|
-
&:focus {
|
282
|
-
@include transition_default;
|
283
|
-
border-color: $primary;
|
284
|
-
background-color: $focus_input_light;
|
285
|
-
&+ trix-toolbar .trix-button-row {
|
286
|
-
transition: all 0.3s ease-in-out 0s;
|
287
|
-
opacity: 100;
|
288
|
-
}
|
289
|
-
}
|
290
|
-
}
|
291
|
-
}
|
292
231
|
}
|
@@ -7,8 +7,6 @@ examples:
|
|
7
7
|
- rich_text_editor_focus: Focus
|
8
8
|
- rich_text_editor_sticky: Sticky
|
9
9
|
- rich_text_editor_templates: Templates
|
10
|
-
- rich_text_editor_toolbar_bottom: Toolbar Bottom
|
11
|
-
- rich_text_editor_inline: Inline
|
12
10
|
- rich_text_editor_preview: Preview
|
13
11
|
|
14
12
|
react:
|
@@ -18,6 +16,4 @@ examples:
|
|
18
16
|
- rich_text_editor_focus: Focus
|
19
17
|
- rich_text_editor_sticky: Sticky
|
20
18
|
- rich_text_editor_templates: Templates
|
21
|
-
- rich_text_editor_toolbar_bottom: Toolbar Bottom
|
22
|
-
- rich_text_editor_inline: Inline
|
23
19
|
- rich_text_editor_preview: Preview
|
@@ -4,6 +4,4 @@ export { default as RichTextEditorAttributes } from './_rich_text_editor_attribu
|
|
4
4
|
export { default as RichTextEditorFocus } from './_rich_text_editor_focus.jsx'
|
5
5
|
export { default as RichTextEditorSticky } from './_rich_text_editor_sticky.jsx'
|
6
6
|
export { default as RichTextEditorTemplates } from './_rich_text_editor_templates.jsx'
|
7
|
-
export { default as RichTextEditorToolbarBottom } from './_rich_text_editor_toolbar_bottom.jsx'
|
8
|
-
export { default as RichTextEditorInline } from './_rich_text_editor_inline.jsx'
|
9
7
|
export { default as RichTextEditorPreview } from './_rich_text_editor_preview.jsx'
|
@@ -6,16 +6,11 @@ module Playbook
|
|
6
6
|
prop :focus, type: Playbook::Props::Boolean,
|
7
7
|
default: false
|
8
8
|
|
9
|
-
prop :inline, type: Playbook::Props::Boolean,
|
10
|
-
default: false
|
11
|
-
|
12
9
|
prop :simple, type: Playbook::Props::Boolean,
|
13
10
|
default: false
|
14
11
|
|
15
12
|
prop :sticky, type: Playbook::Props::Boolean,
|
16
|
-
|
17
|
-
prop :toolbar_bottom, type: Playbook::Props::Boolean,
|
18
|
-
default: false
|
13
|
+
default: false
|
19
14
|
|
20
15
|
prop :value
|
21
16
|
prop :template
|
@@ -40,15 +35,13 @@ module Playbook
|
|
40
35
|
def rich_text_options
|
41
36
|
{
|
42
37
|
id: id,
|
43
|
-
inline: inline,
|
44
38
|
className: classname,
|
45
39
|
focus: focus,
|
46
40
|
simple: simple,
|
47
41
|
sticky: sticky,
|
48
|
-
toolbarBottom: toolbar_bottom,
|
49
42
|
value: value,
|
50
43
|
template: template,
|
51
|
-
placeholder: placeholder
|
44
|
+
placeholder: placeholder
|
52
45
|
}
|
53
46
|
end
|
54
47
|
end
|
@@ -17,7 +17,6 @@ type TextInputProps = {
|
|
17
17
|
disabled?: boolean,
|
18
18
|
error?: string,
|
19
19
|
id?: string,
|
20
|
-
inline?: boolean,
|
21
20
|
name: string,
|
22
21
|
label: string,
|
23
22
|
onChange: (String) => void,
|
@@ -40,7 +39,6 @@ const TextInput = (
|
|
40
39
|
disabled,
|
41
40
|
error,
|
42
41
|
id,
|
43
|
-
inline = false,
|
44
42
|
name,
|
45
43
|
label,
|
46
44
|
onChange = () => {},
|
@@ -55,7 +53,6 @@ const TextInput = (
|
|
55
53
|
const dataProps = buildDataProps(data)
|
56
54
|
const css = classnames([
|
57
55
|
'pb_text_input_kit',
|
58
|
-
inline ? 'inline' : null,
|
59
56
|
error ? 'error' : null,
|
60
57
|
globalProps(props),
|
61
58
|
className,
|
@@ -4,10 +4,8 @@ examples:
|
|
4
4
|
- text_input_error: With Error
|
5
5
|
- text_input_custom: Custom
|
6
6
|
- text_input_disabled: Disabled
|
7
|
-
- text_input_inline: Inline
|
8
7
|
react:
|
9
8
|
- text_input_default: Default
|
10
9
|
- text_input_error: With Error
|
11
10
|
- text_input_custom: Custom
|
12
11
|
- text_input_disabled: Disabled
|
13
|
-
- text_input_inline: Inline
|
@@ -2,4 +2,3 @@ export { default as TextInputDefault } from './_text_input_default.jsx'
|
|
2
2
|
export { default as TextInputCustom } from './_text_input_custom.jsx'
|
3
3
|
export { default as TextInputError } from './_text_input_error.jsx'
|
4
4
|
export { default as TextInputDisabled } from './_text_input_disabled.jsx'
|
5
|
-
export { default as TextInputInline } from './_text_input_inline.jsx'
|
@@ -8,8 +8,6 @@ module Playbook
|
|
8
8
|
prop :disabled, type: Playbook::Props::Boolean,
|
9
9
|
default: false
|
10
10
|
prop :error
|
11
|
-
prop :inline, type: Playbook::Props::Boolean,
|
12
|
-
default: false
|
13
11
|
prop :label
|
14
12
|
prop :name
|
15
13
|
prop :placeholder
|
@@ -21,7 +19,7 @@ module Playbook
|
|
21
19
|
prop :value
|
22
20
|
|
23
21
|
def classname
|
24
|
-
generate_classname("pb_text_input_kit") + error_class
|
22
|
+
generate_classname("pb_text_input_kit") + error_class
|
25
23
|
end
|
26
24
|
|
27
25
|
def validation_message
|
@@ -43,10 +41,6 @@ module Playbook
|
|
43
41
|
def error_class
|
44
42
|
error ? " error" : ""
|
45
43
|
end
|
46
|
-
|
47
|
-
def inline_class
|
48
|
-
inline ? " inline" : ""
|
49
|
-
end
|
50
44
|
end
|
51
45
|
end
|
52
46
|
end
|
@@ -3,10 +3,8 @@
|
|
3
3
|
import React from 'react'
|
4
4
|
import Select from 'react-select'
|
5
5
|
import AsyncSelect from 'react-select/async'
|
6
|
-
import CreateableSelect from 'react-select/creatable'
|
7
6
|
import { get } from 'lodash'
|
8
7
|
import { globalProps } from '../utilities/globalProps.js'
|
9
|
-
import classnames from 'classnames'
|
10
8
|
|
11
9
|
import Control from './components/Control'
|
12
10
|
import ClearIndicator from './components/ClearIndicator'
|
@@ -28,7 +26,6 @@ import { noop } from '../utilities/props'
|
|
28
26
|
|
29
27
|
type Props = {
|
30
28
|
async?: boolean,
|
31
|
-
createable?: boolean,
|
32
29
|
dark?: boolean,
|
33
30
|
label?: string,
|
34
31
|
loadOptions?: noop | string,
|
@@ -58,13 +55,9 @@ const Typeahead = (props: Props) => {
|
|
58
55
|
},
|
59
56
|
defaultOptions: true,
|
60
57
|
id: 'react-select-input',
|
61
|
-
inline: false,
|
62
58
|
isClearable: true,
|
63
59
|
isSearchable: true,
|
64
60
|
name,
|
65
|
-
multiKit: '',
|
66
|
-
onCreate: () => {},
|
67
|
-
plusIcon: false,
|
68
61
|
...props,
|
69
62
|
}
|
70
63
|
|
@@ -72,8 +65,7 @@ const Typeahead = (props: Props) => {
|
|
72
65
|
if (typeof(props.getOptionLabel) === 'string') selectProps.getOptionLabel = get(window, props.getOptionLabel)
|
73
66
|
if (typeof(props.getOptionValue) === 'string') selectProps.getOptionValue = get(window, props.getOptionValue)
|
74
67
|
|
75
|
-
|
76
|
-
if (props.createable) Tag = CreateableSelect
|
68
|
+
const Tag = props.async ? AsyncSelect : Select
|
77
69
|
|
78
70
|
const handleOnChange = (data, { action, option, removedValue }) => {
|
79
71
|
if (action === 'select-option') {
|
@@ -92,10 +84,9 @@ const Typeahead = (props: Props) => {
|
|
92
84
|
}
|
93
85
|
|
94
86
|
const classes = `pb_typeahead_kit react-select ${globalProps(props)}`
|
95
|
-
const inlineClass = selectProps.inline ? 'inline' : null
|
96
87
|
|
97
88
|
return (
|
98
|
-
<div className={
|
89
|
+
<div className={classes}>
|
99
90
|
<Tag
|
100
91
|
classNamePrefix="typeahead-kit-select"
|
101
92
|
onChange={handleOnChange}
|
@@ -154,27 +154,4 @@
|
|
154
154
|
box-sizing: border-box;
|
155
155
|
}
|
156
156
|
}
|
157
|
-
.placeholder+.input-wrapper .typeahead-plus-icon {
|
158
|
-
display: none;
|
159
|
-
}
|
160
|
-
.typeahead-kit-select__control--is-focused .typeahead-plus-icon {
|
161
|
-
display: none;
|
162
|
-
}
|
163
|
-
.typeahead-plus-icon {
|
164
|
-
color: $text_lt_lighter;
|
165
|
-
}
|
166
|
-
[class^=pb_badge_kit] span {
|
167
|
-
line-height: 16.5px;
|
168
|
-
letter-spacing: normal;
|
169
|
-
}
|
170
|
-
&.inline {
|
171
|
-
&:not(:hover) {
|
172
|
-
.text_input {
|
173
|
-
border-color: transparent;
|
174
|
-
}
|
175
|
-
.text_input_indicators .css-tlfecz-indicatorContainer {
|
176
|
-
color: transparent;
|
177
|
-
}
|
178
|
-
}
|
179
|
-
}
|
180
157
|
}
|
@@ -3,7 +3,7 @@
|
|
3
3
|
import React from 'react'
|
4
4
|
import { components } from 'react-select'
|
5
5
|
|
6
|
-
import {
|
6
|
+
import { FormPill } from '../../'
|
7
7
|
|
8
8
|
type Props = {
|
9
9
|
data: object,
|
@@ -15,7 +15,6 @@ type Props = {
|
|
15
15
|
const MultiValue = (props: Props) => {
|
16
16
|
const { removeProps } = props
|
17
17
|
const { imageUrl, label } = props.data
|
18
|
-
const { multiKit } = props.selectProps
|
19
18
|
|
20
19
|
const formPillProps = {
|
21
20
|
marginRight: 'xs',
|
@@ -29,30 +28,19 @@ const MultiValue = (props: Props) => {
|
|
29
28
|
className="text_input_multivalue_container"
|
30
29
|
{...props}
|
31
30
|
>
|
32
|
-
<If condition={
|
33
|
-
<
|
31
|
+
<If condition={imageUrl}>
|
32
|
+
<FormPill
|
33
|
+
avatarUrl={imageUrl}
|
34
34
|
closeProps={removeProps}
|
35
|
-
|
36
|
-
|
37
|
-
variant="primary"
|
35
|
+
marginRight="xs"
|
36
|
+
name={label}
|
38
37
|
/>
|
39
38
|
<Else />
|
40
|
-
<
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
name={label}
|
46
|
-
size={multiKit === 'smallPill' ? 'small' : ''}
|
47
|
-
/>
|
48
|
-
<Else />
|
49
|
-
<FormPill
|
50
|
-
closeProps={removeProps}
|
51
|
-
marginRight="xs"
|
52
|
-
size={multiKit === 'smallPill' ? 'small' : ''}
|
53
|
-
text={label}
|
54
|
-
/>
|
55
|
-
</If>
|
39
|
+
<FormPill
|
40
|
+
closeProps={removeProps}
|
41
|
+
marginRight="xs"
|
42
|
+
text={label}
|
43
|
+
/>
|
56
44
|
</If>
|
57
45
|
</components.MultiValueContainer>
|
58
46
|
)
|
@@ -1,26 +1,13 @@
|
|
1
1
|
/* @flow */
|
2
2
|
|
3
3
|
import React from 'react'
|
4
|
-
import { Flex, Icon } from '../../'
|
5
4
|
import { components } from 'react-select'
|
6
5
|
|
7
6
|
const Placeholder = (props: any) => (
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
>
|
13
|
-
<components.IndicatorsContainer
|
14
|
-
{...props}
|
15
|
-
/>
|
16
|
-
<If condition={props.selectProps.plusIcon}>
|
17
|
-
<Icon
|
18
|
-
className="typeahead-plus-icon"
|
19
|
-
icon="plus"
|
20
|
-
/>
|
21
|
-
</If>
|
22
|
-
</Flex>
|
23
|
-
</>
|
7
|
+
<components.IndicatorsContainer
|
8
|
+
className="placeholder"
|
9
|
+
{...props}
|
10
|
+
/>
|
24
11
|
)
|
25
12
|
|
26
13
|
export default Placeholder
|
@@ -5,8 +5,6 @@ examples:
|
|
5
5
|
- typeahead_with_pills: With Pills
|
6
6
|
- typeahead_with_pills_async: With Pills (Async Data)
|
7
7
|
- typeahead_with_pills_async_users: With Pills (Async Data w/ Users)
|
8
|
-
- typeahead_inline: Inline
|
9
|
-
- typeahead_multi_kit: Multi Kit Options
|
10
8
|
|
11
9
|
react:
|
12
10
|
- typeahead_default: Default
|
@@ -14,5 +12,3 @@ examples:
|
|
14
12
|
- typeahead_with_pills_async: With Pills (Async Data)
|
15
13
|
- typeahead_with_pills_async_users: With Pills (Async Data w/ Users)
|
16
14
|
- typeahead_with_pills_async_custom_options: With Pills (Async Data w/ Custom Options)
|
17
|
-
- typeahead_inline: Inline
|
18
|
-
- typeahead_multi_kit: Multi Kit Options
|
@@ -1,7 +1,5 @@
|
|
1
|
-
export { default as TypeaheadDefault } from './_typeahead_default
|
2
|
-
export { default as TypeaheadWithPills } from './_typeahead_with_pills
|
3
|
-
export { default as TypeaheadWithPillsAsync } from './_typeahead_with_pills_async
|
4
|
-
export { default as TypeaheadWithPillsAsyncUsers } from './_typeahead_with_pills_async_users
|
5
|
-
export { default as TypeaheadWithPillsAsyncCustomOptions } from './_typeahead_with_pills_async_custom_options
|
6
|
-
export { default as TypeaheadInline } from './_typeahead_inline.jsx'
|
7
|
-
export { default as TypeaheadMultiKit } from './_typeahead_multi_kit.jsx'
|
1
|
+
export { default as TypeaheadDefault } from './_typeahead_default'
|
2
|
+
export { default as TypeaheadWithPills } from './_typeahead_with_pills'
|
3
|
+
export { default as TypeaheadWithPillsAsync } from './_typeahead_with_pills_async'
|
4
|
+
export { default as TypeaheadWithPillsAsyncUsers } from './_typeahead_with_pills_async_users'
|
5
|
+
export { default as TypeaheadWithPillsAsyncCustomOptions } from './_typeahead_with_pills_async_custom_options'
|
@@ -4,7 +4,7 @@
|
|
4
4
|
<%= content_tag(:div,
|
5
5
|
id: object.id,
|
6
6
|
data: object.data,
|
7
|
-
class: object.classname
|
7
|
+
class: object.classname) do %>
|
8
8
|
<div class="pb_typeahead_wrapper">
|
9
9
|
<div class="pb_typeahead_loading_indicator" data-pb-typeahead-kit-loading-indicator>
|
10
10
|
<%= pb_rails("icon", props: {
|
@@ -8,21 +8,12 @@ module Playbook
|
|
8
8
|
prop :get_option_label
|
9
9
|
prop :get_option_value
|
10
10
|
prop :id
|
11
|
-
prop :inline, type: Playbook::Props::Boolean,
|
12
|
-
default: false
|
13
11
|
prop :label
|
14
12
|
prop :load_options
|
15
|
-
prop :multi_kit, type: Playbook::Props::String,
|
16
|
-
default: ""
|
17
13
|
prop :name
|
18
|
-
prop :options, type: Playbook::Props::HashArray,
|
19
|
-
|
20
|
-
prop :pills, type: Playbook::Props::Boolean,
|
21
|
-
default: false
|
22
|
-
|
14
|
+
prop :options, type: Playbook::Props::HashArray, default: []
|
15
|
+
prop :pills, type: Playbook::Props::Boolean, default: false
|
23
16
|
prop :placeholder
|
24
|
-
prop :plus_icon, type: Playbook::Props::Boolean,
|
25
|
-
default: false
|
26
17
|
prop :search_term_minimum_length, default: 3
|
27
18
|
prop :search_debounce_timeout, default: 250
|
28
19
|
prop :value
|
@@ -31,10 +22,6 @@ module Playbook
|
|
31
22
|
generate_classname("pb_typeahead_kit")
|
32
23
|
end
|
33
24
|
|
34
|
-
def inline_class
|
35
|
-
inline ? " inline" : ""
|
36
|
-
end
|
37
|
-
|
38
25
|
def data
|
39
26
|
Hash(values[:data]).merge(
|
40
27
|
pb_typeahead_kit: true,
|
@@ -48,14 +35,11 @@ module Playbook
|
|
48
35
|
dark: dark,
|
49
36
|
defaultValue: default_options,
|
50
37
|
id: id,
|
51
|
-
inline: inline,
|
52
38
|
isMulti: true,
|
53
39
|
label: label,
|
54
|
-
multiKit: multi_kit,
|
55
40
|
name: name,
|
56
41
|
options: options,
|
57
42
|
placeholder: placeholder,
|
58
|
-
plusIcon: plus_icon,
|
59
43
|
}
|
60
44
|
|
61
45
|
base_options.merge!({ getOptionLabel: get_option_label }) if get_option_label.present?
|
data/lib/playbook/version.rb
CHANGED
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: playbook_ui
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 9.9.0
|
4
|
+
version: 9.9.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Power UX
|
@@ -1021,8 +1021,6 @@ files:
|
|
1021
1021
|
- app/pb_kits/playbook/pb_form_group/form_group.rb
|
1022
1022
|
- app/pb_kits/playbook/pb_form_pill/_form_pill.jsx
|
1023
1023
|
- app/pb_kits/playbook/pb_form_pill/_form_pill.scss
|
1024
|
-
- app/pb_kits/playbook/pb_form_pill/docs/_form_pill_size.html.erb
|
1025
|
-
- app/pb_kits/playbook/pb_form_pill/docs/_form_pill_size.jsx
|
1026
1024
|
- app/pb_kits/playbook/pb_form_pill/docs/_form_pill_tag.html.erb
|
1027
1025
|
- app/pb_kits/playbook/pb_form_pill/docs/_form_pill_tag.jsx
|
1028
1026
|
- app/pb_kits/playbook/pb_form_pill/docs/_form_pill_user.html.erb
|
@@ -1542,8 +1540,6 @@ files:
|
|
1542
1540
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.jsx
|
1543
1541
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_focus.html.erb
|
1544
1542
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_focus.jsx
|
1545
|
-
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_inline.html.erb
|
1546
|
-
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_inline.jsx
|
1547
1543
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.html.erb
|
1548
1544
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.jsx
|
1549
1545
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_simple.html.erb
|
@@ -1552,8 +1548,6 @@ files:
|
|
1552
1548
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_sticky.jsx
|
1553
1549
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_templates.html.erb
|
1554
1550
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_templates.jsx
|
1555
|
-
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_bottom.html.erb
|
1556
|
-
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_bottom.jsx
|
1557
1551
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml
|
1558
1552
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/index.js
|
1559
1553
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/templates.js
|
@@ -1809,8 +1803,6 @@ files:
|
|
1809
1803
|
- app/pb_kits/playbook/pb_text_input/docs/_text_input_error.html.erb
|
1810
1804
|
- app/pb_kits/playbook/pb_text_input/docs/_text_input_error.jsx
|
1811
1805
|
- app/pb_kits/playbook/pb_text_input/docs/_text_input_error.md
|
1812
|
-
- app/pb_kits/playbook/pb_text_input/docs/_text_input_inline.html.erb
|
1813
|
-
- app/pb_kits/playbook/pb_text_input/docs/_text_input_inline.jsx
|
1814
1806
|
- app/pb_kits/playbook/pb_text_input/docs/example.yml
|
1815
1807
|
- app/pb_kits/playbook/pb_text_input/docs/index.js
|
1816
1808
|
- app/pb_kits/playbook/pb_text_input/text_input.html.erb
|
@@ -1988,10 +1980,6 @@ files:
|
|
1988
1980
|
- app/pb_kits/playbook/pb_typeahead/docs/_footer.md
|
1989
1981
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.html.erb
|
1990
1982
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.jsx
|
1991
|
-
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_inline.html.erb
|
1992
|
-
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_inline.jsx
|
1993
|
-
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.html.erb
|
1994
|
-
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.jsx
|
1995
1983
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_context.html.erb
|
1996
1984
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.html.erb
|
1997
1985
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.jsx
|
@@ -2146,9 +2134,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
2146
2134
|
version: '0'
|
2147
2135
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
2148
2136
|
requirements:
|
2149
|
-
- - "
|
2137
|
+
- - ">="
|
2150
2138
|
- !ruby/object:Gem::Version
|
2151
|
-
version:
|
2139
|
+
version: '0'
|
2152
2140
|
requirements: []
|
2153
2141
|
rubygems_version: 3.1.4
|
2154
2142
|
signing_key:
|
@@ -1,13 +0,0 @@
|
|
1
|
-
<%= pb_rails("form_pill", props: {
|
2
|
-
name: "Anna Black",
|
3
|
-
avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
|
4
|
-
size: "small",
|
5
|
-
}) %>
|
6
|
-
|
7
|
-
<br />
|
8
|
-
<br />
|
9
|
-
|
10
|
-
<%= pb_rails("form_pill", props: {
|
11
|
-
name: "Anna Black",
|
12
|
-
size: "small",
|
13
|
-
}) %>
|
@@ -1,25 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
import FormPill from '../_form_pill.jsx'
|
3
|
-
|
4
|
-
const FormPillSize = (props) => {
|
5
|
-
return (
|
6
|
-
|
7
|
-
<div>
|
8
|
-
<FormPill
|
9
|
-
avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
|
10
|
-
name="Anna Black"
|
11
|
-
size="small"
|
12
|
-
{...props}
|
13
|
-
/>
|
14
|
-
<br />
|
15
|
-
<br />
|
16
|
-
<FormPill
|
17
|
-
name="Anna Black"
|
18
|
-
size="small"
|
19
|
-
{...props}
|
20
|
-
/>
|
21
|
-
</div>
|
22
|
-
)
|
23
|
-
}
|
24
|
-
|
25
|
-
export default FormPillSize
|
@@ -1,16 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
import { RichTextEditor } from '../../'
|
3
|
-
|
4
|
-
const RichTextEditorInline = (props) => (
|
5
|
-
<div>
|
6
|
-
<RichTextEditor
|
7
|
-
id="inline"
|
8
|
-
inline
|
9
|
-
toolbarBottom
|
10
|
-
value="Try hovering over this text. Then try modifying it or adding more of your own text."
|
11
|
-
{...props}
|
12
|
-
/>
|
13
|
-
</div>
|
14
|
-
)
|
15
|
-
|
16
|
-
export default RichTextEditorInline
|
@@ -1,14 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
import { RichTextEditor } from '../../'
|
3
|
-
|
4
|
-
const RichTextEditorToolbarBottom = (props) => (
|
5
|
-
<div>
|
6
|
-
<RichTextEditor
|
7
|
-
id="bottom-toolbar"
|
8
|
-
toolbarBottom
|
9
|
-
{...props}
|
10
|
-
/>
|
11
|
-
</div>
|
12
|
-
)
|
13
|
-
|
14
|
-
export default RichTextEditorToolbarBottom
|
@@ -1,22 +0,0 @@
|
|
1
|
-
import React, { useState } from 'react'
|
2
|
-
import { TextInput } from '../../'
|
3
|
-
|
4
|
-
const TextInputInline = (props) => {
|
5
|
-
const [value, setValue] = useState('Inline Input')
|
6
|
-
const handleValueChange = ({ target }) => {
|
7
|
-
setValue(target.value)
|
8
|
-
}
|
9
|
-
return (
|
10
|
-
<div>
|
11
|
-
<TextInput
|
12
|
-
inline
|
13
|
-
label="Hover Over Text Below"
|
14
|
-
onChange={handleValueChange}
|
15
|
-
value={value}
|
16
|
-
{...props}
|
17
|
-
/>
|
18
|
-
</div>
|
19
|
-
)
|
20
|
-
}
|
21
|
-
|
22
|
-
export default TextInputInline
|
@@ -1,36 +0,0 @@
|
|
1
|
-
<%
|
2
|
-
synths = [
|
3
|
-
{ label: 'Oberheim', value: 'OBXa' },
|
4
|
-
{ label: 'Moog', value: 'Minimoog' },
|
5
|
-
{ label: 'Roland', value: 'Juno' },
|
6
|
-
{ label: 'Korg', value: 'MS-20' },
|
7
|
-
]
|
8
|
-
%>
|
9
|
-
<%
|
10
|
-
cities = [
|
11
|
-
{ label: 'Budapest', value: 'Hungary' },
|
12
|
-
{ label: 'Singapore', value: 'Singapore' },
|
13
|
-
{ label: 'Oslo', value: 'Norway' },
|
14
|
-
{ label: 'Lagos', value: 'Nigeria' },
|
15
|
-
]
|
16
|
-
%>
|
17
|
-
|
18
|
-
<%= pb_rails("typeahead", props: {
|
19
|
-
default_options: [synths.first],
|
20
|
-
id: "typeahead-inline-example1",
|
21
|
-
inline: true,
|
22
|
-
options: synths,
|
23
|
-
label: "Synths",
|
24
|
-
placeholder: "Add synths",
|
25
|
-
pills: true
|
26
|
-
}) %>
|
27
|
-
|
28
|
-
<%= pb_rails("typeahead", props: {
|
29
|
-
id: "typeahead-inline-example2",
|
30
|
-
inline: true,
|
31
|
-
options: cities,
|
32
|
-
label: "Cities",
|
33
|
-
pills: true,
|
34
|
-
placeholder: "Add cities",
|
35
|
-
plus_icon: true
|
36
|
-
}) %>
|
@@ -1,43 +0,0 @@
|
|
1
|
-
// @flow
|
2
|
-
|
3
|
-
import React from 'react'
|
4
|
-
import { Typeahead } from '../../'
|
5
|
-
|
6
|
-
const synths = [
|
7
|
-
{ label: 'Oberheim', value: 'OBXa' },
|
8
|
-
{ label: 'Moog', value: 'Minimoog' },
|
9
|
-
{ label: 'Roland', value: 'Juno' },
|
10
|
-
{ label: 'Korg', value: 'MS-20' },
|
11
|
-
]
|
12
|
-
|
13
|
-
const cities = [
|
14
|
-
{ label: 'Budapest', value: 'Hungary' },
|
15
|
-
{ label: 'Singapore', value: 'Singapore' },
|
16
|
-
{ label: 'Oslo', value: 'Norway' },
|
17
|
-
{ label: 'Lagos', value: 'Nigeria' },
|
18
|
-
]
|
19
|
-
|
20
|
-
const TypeaheadInline = (props) => {
|
21
|
-
return (
|
22
|
-
<>
|
23
|
-
<Typeahead
|
24
|
-
inline
|
25
|
-
isMulti
|
26
|
-
label="Synths"
|
27
|
-
options={synths}
|
28
|
-
{...props}
|
29
|
-
/>
|
30
|
-
<Typeahead
|
31
|
-
inline
|
32
|
-
isMulti
|
33
|
-
label="Placeholder Plus Icon"
|
34
|
-
options={cities}
|
35
|
-
placeholder="Add cities"
|
36
|
-
plusIcon
|
37
|
-
{...props}
|
38
|
-
/>
|
39
|
-
</>
|
40
|
-
)
|
41
|
-
}
|
42
|
-
|
43
|
-
export default TypeaheadInline
|
@@ -1,35 +0,0 @@
|
|
1
|
-
<%
|
2
|
-
labels = [
|
3
|
-
{ label: 'Verve', value: '1956' },
|
4
|
-
{ label: 'Stax', value: '1957' },
|
5
|
-
{ label: 'Motown', value: '1959' },
|
6
|
-
{ label: 'Kudu', value: '1971' },
|
7
|
-
{ label: 'Stones Throw', value: '1996' },
|
8
|
-
]
|
9
|
-
%>
|
10
|
-
<%
|
11
|
-
expressionists = [
|
12
|
-
{ label: 'Kandinsky', value: 'Russia' },
|
13
|
-
{ label: 'Klee', value: 'Switzerland' },
|
14
|
-
{ label: 'Kokoschka', value: 'Austria' },
|
15
|
-
{ label: 'Kirchner', value: 'Germany' },
|
16
|
-
]
|
17
|
-
%>
|
18
|
-
|
19
|
-
<%= pb_rails("typeahead", props: {
|
20
|
-
default_options: [labels.first],
|
21
|
-
id: "typeahead-multi-kit-example1",
|
22
|
-
options: labels,
|
23
|
-
label: "Badges",
|
24
|
-
multi_kit: "badge",
|
25
|
-
pills: true
|
26
|
-
}) %>
|
27
|
-
|
28
|
-
<%= pb_rails("typeahead", props: {
|
29
|
-
default_options: [expressionists.first],
|
30
|
-
id: "typeahead-multi-kit-example2",
|
31
|
-
options: expressionists,
|
32
|
-
label: "Small Pills",
|
33
|
-
multi_kit: "smallPill",
|
34
|
-
pills: true,
|
35
|
-
}) %>
|
@@ -1,44 +0,0 @@
|
|
1
|
-
// @flow
|
2
|
-
|
3
|
-
import React from 'react'
|
4
|
-
import { Typeahead } from '../../'
|
5
|
-
|
6
|
-
const labels = [
|
7
|
-
{ label: 'Verve', value: '1956' },
|
8
|
-
{ label: 'Stax', value: '1957' },
|
9
|
-
{ label: 'Motown', value: '1959' },
|
10
|
-
{ label: 'Kudu', value: '1971' },
|
11
|
-
{ label: 'Stones Throw', value: '1996' },
|
12
|
-
]
|
13
|
-
|
14
|
-
const expressionists = [
|
15
|
-
{ label: 'Kandinsky', value: 'Russia' },
|
16
|
-
{ label: 'Klee', value: 'Switzerland' },
|
17
|
-
{ label: 'Kokoschka', value: 'Austria' },
|
18
|
-
{ label: 'Kirchner', value: 'Germany' },
|
19
|
-
]
|
20
|
-
|
21
|
-
const TypeaheadMultiKit = (props) => {
|
22
|
-
return (
|
23
|
-
<>
|
24
|
-
<Typeahead
|
25
|
-
defaultValue={[labels[0]]}
|
26
|
-
isMulti
|
27
|
-
label="Badges"
|
28
|
-
multiKit="badge"
|
29
|
-
options={labels}
|
30
|
-
{...props}
|
31
|
-
/>
|
32
|
-
<Typeahead
|
33
|
-
defaultValue={[expressionists[0]]}
|
34
|
-
isMulti
|
35
|
-
label="Small Pills"
|
36
|
-
multiKit="smallPill"
|
37
|
-
options={expressionists}
|
38
|
-
{...props}
|
39
|
-
/>
|
40
|
-
</>
|
41
|
-
)
|
42
|
-
}
|
43
|
-
|
44
|
-
export default TypeaheadMultiKit
|