-
Notifications
You must be signed in to change notification settings - Fork 0
/
BasicUserSearch.tsx
127 lines (118 loc) · 4.45 KB
/
BasicUserSearch.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
import * as React from "react";
import { getFocusStyle, getTheme, ITheme, Link, List, mergeStyleSets, SearchBox, Shimmer, ShimmerElementsGroup, ShimmerElementType, Stack } from "@fluentui/react";
import { useSearchUser } from "pnp-react-hooks";
import { IPeoplePickerEntity } from "@pnp/sp/profiles/types";
export function BasicUserSearch()
{
const [searchText, setSearchText] = React.useState<string>();
const users = useSearchUser(
{
AllowEmailAddresses: true,
MaximumEntitySuggestions: 5,
QueryString: searchText
});
return (
<Stack tokens={{ childrenGap: 20 }}>
<Stack.Item>
<SearchBox
placeholder="Search users"
onSearch={setSearchText}
onClear={() => setSearchText(undefined)}
/>
</Stack.Item>
<Stack.Item>
{
searchText?.length > 0
? <Shimmer
customElementsGroup={getCustomElements}
isDataLoaded={users !== undefined}
>
<Stack tokens={{ childrenGap: 15 }}>
<Stack.Item>
<List
items={users ?? []}
onRenderCell={onRenderCell}
/>
</Stack.Item>
</Stack>
</Shimmer>
: undefined
}
</Stack.Item>
</Stack>
);
}
const theme: ITheme = getTheme();
const { palette, semanticColors, fonts } = theme;
const classNames = mergeStyleSets({
itemCell: [
getFocusStyle(theme, { inset: -1 }),
{
minHeight: 54,
padding: 10,
boxSizing: 'border-box',
borderBottom: `1px solid ${semanticColors.bodyDivider}`,
display: 'flex',
selectors: {
'&:hover': { background: palette.neutralPrimaryAlt },
},
},
],
itemContent: {
marginLeft: 10,
overflow: 'hidden',
flexGrow: 1,
},
itemName: [
fonts.xLarge,
{
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
},
],
itemIndex: {
fontSize: fonts.small.fontSize,
color: palette.neutralTertiary,
marginBottom: 10,
}
});
const onRenderCell = (item: IPeoplePickerEntity, index: number | undefined): JSX.Element =>
{
return (
<div className={classNames.itemCell} data-is-focusable={true}>
<div className={classNames.itemContent}>
<div className={classNames.itemName}>
<Link href={`mailto:${item.EntityData.Email}`} target="_blank">
{item.DisplayText}
</Link>
</div>
<div className={classNames.itemIndex}>{`View ${item.EntityData.Department}`}</div>
<div>{item.Description}</div>
</div>
</div>
);
};
const wrapperStyles = { display: 'flex' };
const getCustomElements = (): JSX.Element =>
{
return (
<div style={wrapperStyles}>
<ShimmerElementsGroup
flexWrap
width="100%"
shimmerElements={[
{ type: ShimmerElementType.line, width: '100%', height: 50, verticalAlign: 'bottom' },
{ type: ShimmerElementType.gap, width: '100%', height: 10, verticalAlign: 'bottom' },
{ type: ShimmerElementType.line, width: '100%', height: 50, verticalAlign: 'bottom' },
{ type: ShimmerElementType.gap, width: '100%', height: 10, verticalAlign: 'bottom' },
{ type: ShimmerElementType.line, width: '100%', height: 50, verticalAlign: 'bottom' },
{ type: ShimmerElementType.gap, width: '100%', height: 10, verticalAlign: 'bottom' },
{ type: ShimmerElementType.line, width: '100%', height: 50, verticalAlign: 'bottom' },
{ type: ShimmerElementType.gap, width: '100%', height: 10, verticalAlign: 'bottom' },
{ type: ShimmerElementType.line, width: '100%', height: 50, verticalAlign: 'bottom' },
]}
/>
</div>
);
};