playbook_ui 11.18.0 → 11.19.0.pre.typeahead1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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:
|