playbook_ui 11.18.0 → 11.19.0.pre.typeahead1
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_typeahead/_typeahead.jsx +13 -2
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx +98 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/index.js +1 -0
- data/lib/playbook/version.rb +2 -2
- metadata +5 -4
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 1239957037bcd6ef4b8211bd071fce1cc7b57bb2751f00fcbbe305665f024b24
|
|
4
|
+
data.tar.gz: 6b6a529a7c84b1dbfd2911947ff891abe8eb04935cccd2623265dfa0da73cae4
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 747395a9c410e99207bdbb7d0bede2028503ec675e8754bcff0e1cf92579d3fd7e66134ad5c99417c751451968ab4f1ab9093b2036bf40985480b7a8707dfc51
|
|
7
|
+
data.tar.gz: ae572fac37a574c478dea054368416465644b6163a3593068f7559bf3f35516c9851e3db67f84d43cd2f8d69d330bf38dd8231f15381e6199c01df198ea9b5de
|
|
@@ -28,10 +28,11 @@ import { noop } from '../utilities/props'
|
|
|
28
28
|
*/
|
|
29
29
|
|
|
30
30
|
type TypeaheadProps = {
|
|
31
|
-
id?: string,
|
|
32
31
|
async?: boolean,
|
|
32
|
+
components?: object,
|
|
33
33
|
createable?: boolean,
|
|
34
34
|
dark?: boolean,
|
|
35
|
+
id?: string,
|
|
35
36
|
label?: string,
|
|
36
37
|
loadOptions?: string,
|
|
37
38
|
getOptionLabel?: string | (() => any),
|
|
@@ -44,7 +45,16 @@ type TypeaheadProps = {
|
|
|
44
45
|
* @param {TypeaheadProps} props - props as described at https://react-select.com/props
|
|
45
46
|
*/
|
|
46
47
|
|
|
47
|
-
const Typeahead = ({
|
|
48
|
+
const Typeahead = ({
|
|
49
|
+
async,
|
|
50
|
+
components = {},
|
|
51
|
+
createable,
|
|
52
|
+
getOptionLabel,
|
|
53
|
+
getOptionValue,
|
|
54
|
+
id,
|
|
55
|
+
loadOptions = noop,
|
|
56
|
+
...props
|
|
57
|
+
}: TypeaheadProps) => {
|
|
48
58
|
const selectProps = {
|
|
49
59
|
cacheOptions: true,
|
|
50
60
|
components: {
|
|
@@ -57,6 +67,7 @@ const Typeahead = ({ loadOptions = noop, getOptionLabel, id, getOptionValue, cre
|
|
|
57
67
|
Option,
|
|
58
68
|
Placeholder,
|
|
59
69
|
ValueContainer,
|
|
70
|
+
...components
|
|
60
71
|
},
|
|
61
72
|
loadOptions: isString(loadOptions) ? get(window, loadOptions) : loadOptions,
|
|
62
73
|
getOptionLabel: isString(getOptionLabel) ? get(window, getOptionLabel) : getOptionLabel,
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
/* eslint-disable react/no-danger */
|
|
2
|
+
/* eslint-disable react/no-multi-comp */
|
|
3
|
+
/* @flow */
|
|
4
|
+
|
|
5
|
+
import React, { useState } from 'react'
|
|
6
|
+
import { components, OptionProps } from 'react-select'
|
|
7
|
+
|
|
8
|
+
import {
|
|
9
|
+
Avatar,
|
|
10
|
+
Body,
|
|
11
|
+
Flex,
|
|
12
|
+
FlexItem,
|
|
13
|
+
Title,
|
|
14
|
+
Typeahead,
|
|
15
|
+
} from '../..'
|
|
16
|
+
|
|
17
|
+
const USERS = [
|
|
18
|
+
{
|
|
19
|
+
name: "Wade Winningham",
|
|
20
|
+
title: "Nitro Principal Developer",
|
|
21
|
+
territory: "PHL",
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
name: "Jason Cypret",
|
|
25
|
+
title: "Vice President of User Experience",
|
|
26
|
+
territory: "PHL",
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
name: "Stephen Marshall",
|
|
30
|
+
title: "Senior User Experience Engineer",
|
|
31
|
+
territory: "PHL",
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
name: "Jasper Furniss",
|
|
35
|
+
title: "Senior User Experience Engineer",
|
|
36
|
+
territory: "PHL",
|
|
37
|
+
},
|
|
38
|
+
];
|
|
39
|
+
|
|
40
|
+
const TypeaheadWithHighlight = (props) => {
|
|
41
|
+
const [selectedUser, setSelectedUser] = useState()
|
|
42
|
+
|
|
43
|
+
const formatOptionLabel = ({name, territory, title}, {inputValue}) => {
|
|
44
|
+
|
|
45
|
+
const highlighted = (text: string) => {
|
|
46
|
+
if (!inputValue.length) return text
|
|
47
|
+
return text.replace(
|
|
48
|
+
new RegExp(inputValue, 'gi'),
|
|
49
|
+
highlighted => `<mark>${highlighted}</mark>`
|
|
50
|
+
)
|
|
51
|
+
}
|
|
52
|
+
return (
|
|
53
|
+
<Flex>
|
|
54
|
+
<FlexItem>
|
|
55
|
+
<Avatar
|
|
56
|
+
marginRight="sm"
|
|
57
|
+
name={name}
|
|
58
|
+
size="sm"
|
|
59
|
+
/>
|
|
60
|
+
</FlexItem>
|
|
61
|
+
<FlexItem>
|
|
62
|
+
<Title size={4}><span dangerouslySetInnerHTML={{ __html: highlighted(name) }} /></Title>
|
|
63
|
+
<Body color="light">
|
|
64
|
+
<span dangerouslySetInnerHTML={{ __html: highlighted(title) }} />{" • "}
|
|
65
|
+
{territory}
|
|
66
|
+
</Body>
|
|
67
|
+
</FlexItem>
|
|
68
|
+
</Flex>
|
|
69
|
+
)
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
const customComponents = {
|
|
73
|
+
Option: (props: OptionProps) => (
|
|
74
|
+
<components.Option {...props}/>
|
|
75
|
+
),
|
|
76
|
+
SingleValue: ({ data }: any) => (
|
|
77
|
+
<span>{data.name}</span>
|
|
78
|
+
)
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
return (
|
|
82
|
+
<React.Fragment>
|
|
83
|
+
<Typeahead
|
|
84
|
+
components={customComponents}
|
|
85
|
+
formatOptionLabel={formatOptionLabel}
|
|
86
|
+
getOptionLabel={(option) => option.name}
|
|
87
|
+
getOptionValue={({name, title}) => `${name} ${title}`}
|
|
88
|
+
label="Users"
|
|
89
|
+
onChange={(user) => setSelectedUser(user)}
|
|
90
|
+
options={USERS.filter((option) => option.name != selectedUser?.name)}
|
|
91
|
+
placeholder="type the name of a user"
|
|
92
|
+
{...props}
|
|
93
|
+
/>
|
|
94
|
+
</React.Fragment>
|
|
95
|
+
)
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
export default TypeaheadWithHighlight
|
|
@@ -11,6 +11,7 @@ examples:
|
|
|
11
11
|
|
|
12
12
|
react:
|
|
13
13
|
- typeahead_default: Default
|
|
14
|
+
- typeahead_with_highlight: With Highlight
|
|
14
15
|
- typeahead_with_pills: With Pills
|
|
15
16
|
- typeahead_with_pills_async: With Pills (Async Data)
|
|
16
17
|
- typeahead_with_pills_async_users: With Pills (Async Data w/ Users)
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export { default as TypeaheadDefault } from './_typeahead_default.jsx'
|
|
2
|
+
export { default as TypeaheadWithHighlight } from './_typeahead_with_highlight.jsx'
|
|
2
3
|
export { default as TypeaheadWithPills } from './_typeahead_with_pills.jsx'
|
|
3
4
|
export { default as TypeaheadWithPillsAsync } from './_typeahead_with_pills_async.jsx'
|
|
4
5
|
export { default as TypeaheadWithPillsAsyncUsers } from './_typeahead_with_pills_async_users.jsx'
|
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: 11.
|
|
4
|
+
version: 11.19.0.pre.typeahead1
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Power UX
|
|
@@ -9,7 +9,7 @@ authors:
|
|
|
9
9
|
autorequire:
|
|
10
10
|
bindir: bin
|
|
11
11
|
cert_chain: []
|
|
12
|
-
date: 2023-01-
|
|
12
|
+
date: 2023-01-11 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: actionpack
|
|
@@ -2141,6 +2141,7 @@ files:
|
|
|
2141
2141
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.html.erb
|
|
2142
2142
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.jsx
|
|
2143
2143
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_context.html.erb
|
|
2144
|
+
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx
|
|
2144
2145
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.html.erb
|
|
2145
2146
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.jsx
|
|
2146
2147
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md
|
|
@@ -2362,9 +2363,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
|
2362
2363
|
version: '0'
|
|
2363
2364
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
|
2364
2365
|
requirements:
|
|
2365
|
-
- - "
|
|
2366
|
+
- - ">"
|
|
2366
2367
|
- !ruby/object:Gem::Version
|
|
2367
|
-
version:
|
|
2368
|
+
version: 1.3.1
|
|
2368
2369
|
requirements: []
|
|
2369
2370
|
rubygems_version: 3.3.7
|
|
2370
2371
|
signing_key:
|