@planningcenter/topbar 7.1.0-alpha.1 → 7.1.0-testing.1
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.
- package/dist/modules/colors.d.ts +46 -0
- package/dist/modules/components/conditional_wrap.d.ts +7 -0
- package/dist/modules/components/notification_item.d.ts +4 -1
- package/dist/modules/components/notifications_inbox.d.ts +14 -0
- package/dist/modules/components/notifications_menu.d.ts +10 -3
- package/dist/modules/components/notifications_menu_Wrapper.d.ts +7 -0
- package/dist/modules/components/notifications_menu_blank_state.d.ts +8 -0
- package/dist/modules/components/popover_root.d.ts +6 -0
- package/dist/modules/components/spinner.d.ts +4 -0
- package/dist/modules/hooks/use_hover.d.ts +3 -0
- package/dist/modules/hooks/use_notifications.d.ts +14 -0
- package/dist/modules/medium_topbar.d.ts +34 -38
- package/dist/modules/not_small_topbar.d.ts +37 -62
- package/dist/modules/small_topbar.d.ts +39 -42
- package/dist/modules/symbols.d.ts +7 -1
- package/dist/topbar +2 -0
- package/dist/topbar.css +2 -0
- package/dist/topbar.css.map +1 -0
- package/dist/topbar.js +1 -1
- package/dist/topbar.js.map +1 -1
- package/dist/topbar.map +1 -0
- package/dist/topbar.modern.css +2 -0
- package/dist/topbar.modern.css.map +1 -0
- package/dist/topbar.modern.js +1 -1
- package/dist/topbar.modern.js.map +1 -1
- package/dist/topbar.module.css +2 -0
- package/dist/topbar.module.css.map +1 -0
- package/dist/topbar.module.js +1 -1
- package/dist/topbar.module.js.map +1 -1
- package/dist/topbar.umd.js +1 -1
- package/dist/topbar.umd.js.map +1 -1
- package/package.json +17 -9
- package/prepare.js +15 -0
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
declare const colors: {
|
|
2
|
+
danger43: string;
|
|
3
|
+
danger45: string;
|
|
4
|
+
danger47: string;
|
|
5
|
+
danger93: string;
|
|
6
|
+
danger97: string;
|
|
7
|
+
darkNeutral07: string;
|
|
8
|
+
darkNeutral12: string;
|
|
9
|
+
darkNeutral15: string;
|
|
10
|
+
darkNeutral17: string;
|
|
11
|
+
darkNeutral19: string;
|
|
12
|
+
darkNeutral24: string;
|
|
13
|
+
darkNeutral32: string;
|
|
14
|
+
darkNeutral50: string;
|
|
15
|
+
darkNeutral68: string;
|
|
16
|
+
darkNeutral88: string;
|
|
17
|
+
darkNeutral98: string;
|
|
18
|
+
interaction45: string;
|
|
19
|
+
interaction50: string;
|
|
20
|
+
interaction55: string;
|
|
21
|
+
interaction66: string;
|
|
22
|
+
interaction91: string;
|
|
23
|
+
interaction93: string;
|
|
24
|
+
lightNeutral100: string;
|
|
25
|
+
lightNeutral12: string;
|
|
26
|
+
lightNeutral24: string;
|
|
27
|
+
lightNeutral45: string;
|
|
28
|
+
lightNeutral62: string;
|
|
29
|
+
lightNeutral81: string;
|
|
30
|
+
lightNeutral88: string;
|
|
31
|
+
lightNeutral93: string;
|
|
32
|
+
lightNeutral95: string;
|
|
33
|
+
lightNeutral97: string;
|
|
34
|
+
lightNeutral98: string;
|
|
35
|
+
success23: string;
|
|
36
|
+
success25: string;
|
|
37
|
+
success27: string;
|
|
38
|
+
success91: string;
|
|
39
|
+
success97: string;
|
|
40
|
+
warning49: string;
|
|
41
|
+
warning55: string;
|
|
42
|
+
warning63: string;
|
|
43
|
+
warning94: string;
|
|
44
|
+
warning97: string;
|
|
45
|
+
};
|
|
46
|
+
export default colors;
|
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { Notification } from "../interfaces";
|
|
3
|
-
declare const NotificationItem: ({ isLast, notification: { appName, createdAt, isRead, link, title }, }: {
|
|
3
|
+
declare const NotificationItem: ({ mobile, isLast, onToggleRead, showBottomBorder, notification: { appName, createdAt, isRead, link, title }, }: {
|
|
4
|
+
mobile?: boolean;
|
|
4
5
|
isLast?: boolean;
|
|
6
|
+
onToggleRead: any;
|
|
7
|
+
showBottomBorder?: boolean;
|
|
5
8
|
notification: Notification;
|
|
6
9
|
}) => JSX.Element;
|
|
7
10
|
export default NotificationItem;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import * as PCO_URL from "@planningcenter/url";
|
|
3
|
+
import { Notification } from "../interfaces";
|
|
4
|
+
declare const NotificationsInbox: ({ env, render, userId, }: {
|
|
5
|
+
env: PCO_URL.Environment;
|
|
6
|
+
render: (props: {
|
|
7
|
+
handleMarkAllAsRead: () => any;
|
|
8
|
+
handleToggleRead: (notification: Notification) => any;
|
|
9
|
+
read: Notification[];
|
|
10
|
+
unread: Notification[];
|
|
11
|
+
}) => JSX.Element;
|
|
12
|
+
userId: string;
|
|
13
|
+
}) => JSX.Element;
|
|
14
|
+
export default NotificationsInbox;
|
|
@@ -1,11 +1,18 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
+
import * as PCO_URL from "@planningcenter/url";
|
|
2
3
|
import { Notification } from "../interfaces";
|
|
3
|
-
declare const NotificationsMenu: ({ notifications: { read, unread }, toggle, visible, }: {
|
|
4
|
+
declare const NotificationsMenu: ({ env, handleMarkAllAsRead, handleToggleRead, hasError, isLoading, mobile, notifications: { read, unread }, toggle, visible, }: {
|
|
5
|
+
env: PCO_URL.Environment;
|
|
6
|
+
handleMarkAllAsRead: () => any;
|
|
7
|
+
handleToggleRead: (notification: Notification) => any;
|
|
8
|
+
hasError?: boolean;
|
|
9
|
+
isLoading?: boolean;
|
|
10
|
+
mobile?: boolean;
|
|
4
11
|
notifications: {
|
|
5
12
|
read: Notification[];
|
|
6
13
|
unread: Notification[];
|
|
7
14
|
};
|
|
8
|
-
toggle
|
|
9
|
-
visible
|
|
15
|
+
toggle?: any;
|
|
16
|
+
visible?: boolean;
|
|
10
17
|
}) => JSX.Element;
|
|
11
18
|
export default NotificationsMenu;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
declare const NotificationsMenuBlankState: ({ dark, description, style, title, ...props }: {
|
|
3
|
+
dark?: boolean;
|
|
4
|
+
description: string;
|
|
5
|
+
style?: object;
|
|
6
|
+
title?: string;
|
|
7
|
+
}) => JSX.Element;
|
|
8
|
+
export default NotificationsMenuBlankState;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import * as PCO_URL from "@planningcenter/url";
|
|
2
|
+
import { Notification } from "../interfaces";
|
|
3
|
+
declare const useNotifications: ({ env, userId, }: {
|
|
4
|
+
env: PCO_URL.Environment;
|
|
5
|
+
userId: string;
|
|
6
|
+
}) => {
|
|
7
|
+
handleMarkAllAsRead: () => any;
|
|
8
|
+
handleToggleRead: (notification: Notification) => any;
|
|
9
|
+
hasError: boolean;
|
|
10
|
+
isLoading: boolean;
|
|
11
|
+
read: Notification[];
|
|
12
|
+
unread: Notification[];
|
|
13
|
+
};
|
|
14
|
+
export default useNotifications;
|
|
@@ -1,46 +1,42 @@
|
|
|
1
|
-
|
|
1
|
+
/// <reference types="react" />
|
|
2
2
|
import * as PCO_URL from "@planningcenter/url";
|
|
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
|
-
userMenuVisible: boolean;
|
|
34
|
-
}> {
|
|
35
|
-
constructor(props: any);
|
|
36
|
-
static defaultProps: {
|
|
3
|
+
declare const Topbar: {
|
|
4
|
+
(props: {
|
|
5
|
+
apps: {
|
|
6
|
+
attributes: {
|
|
7
|
+
name: string;
|
|
8
|
+
url: string;
|
|
9
|
+
};
|
|
10
|
+
}[];
|
|
11
|
+
env: PCO_URL.Environment;
|
|
12
|
+
appName: string;
|
|
13
|
+
routes: any;
|
|
14
|
+
colors: any;
|
|
15
|
+
userAvatarPath: string;
|
|
16
|
+
userId: string;
|
|
17
|
+
userName: string;
|
|
18
|
+
orgName: string;
|
|
19
|
+
connectedPeople: any;
|
|
20
|
+
search?: any;
|
|
21
|
+
style?: any;
|
|
22
|
+
showOrgName?: boolean;
|
|
23
|
+
notifications?: any;
|
|
24
|
+
requestAppsFetch: any;
|
|
25
|
+
requestConnectedPeopleFetch: any;
|
|
26
|
+
requestUnlinkConnectedPeople: any;
|
|
27
|
+
requestSwitchConnectedPerson: any;
|
|
28
|
+
requestClearAppsCache: any;
|
|
29
|
+
requestClearConnectedPeopleCache: any;
|
|
30
|
+
linkToProfile?: boolean;
|
|
31
|
+
}): JSX.Element;
|
|
32
|
+
defaultProps: {
|
|
37
33
|
currentRouteComponent: (props: any) => JSX.Element;
|
|
38
34
|
};
|
|
39
|
-
|
|
40
|
-
}
|
|
41
|
-
export declare const Route: ({ active, style, name, ...props }: {
|
|
35
|
+
};
|
|
36
|
+
declare const Route: ({ active, style, name, ...props }: {
|
|
42
37
|
[x: string]: any;
|
|
43
38
|
active: any;
|
|
44
39
|
style: any;
|
|
45
40
|
name?: string;
|
|
46
41
|
}) => JSX.Element;
|
|
42
|
+
export { Route, Topbar };
|
|
@@ -1,72 +1,47 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import * as PCO_URL from "@planningcenter/url";
|
|
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
|
-
notificationsMenuVisible: boolean;
|
|
35
|
-
routesVisible: boolean;
|
|
36
|
-
userMenuVisible: boolean;
|
|
37
|
-
notifications: {
|
|
38
|
-
unread: Notification[];
|
|
39
|
-
read: Notification[];
|
|
40
|
-
};
|
|
41
|
-
}> {
|
|
42
|
-
static defaultProps: {
|
|
3
|
+
declare const Topbar: {
|
|
4
|
+
(props: {
|
|
5
|
+
apps: {
|
|
6
|
+
attributes: {
|
|
7
|
+
name: string;
|
|
8
|
+
url: string;
|
|
9
|
+
};
|
|
10
|
+
}[];
|
|
11
|
+
activeRoute: string;
|
|
12
|
+
env: PCO_URL.Environment;
|
|
13
|
+
appName: string;
|
|
14
|
+
routes: any;
|
|
15
|
+
colors: any;
|
|
16
|
+
userAvatarPath: string;
|
|
17
|
+
userId: string;
|
|
18
|
+
userName: string;
|
|
19
|
+
orgName: string;
|
|
20
|
+
connectedPeople: any;
|
|
21
|
+
search?: any;
|
|
22
|
+
style?: any;
|
|
23
|
+
showOrgName?: boolean;
|
|
24
|
+
requestAppsFetch: any;
|
|
25
|
+
requestConnectedPeopleFetch: any;
|
|
26
|
+
requestUnlinkConnectedPeople: any;
|
|
27
|
+
requestSwitchConnectedPerson: any;
|
|
28
|
+
requestClearAppsCache: any;
|
|
29
|
+
requestClearConnectedPeopleCache: any;
|
|
30
|
+
useDummyNotifications?: boolean;
|
|
31
|
+
linkToProfile?: boolean;
|
|
32
|
+
}): JSX.Element;
|
|
33
|
+
defaultProps: {
|
|
43
34
|
search: () => any;
|
|
44
35
|
linkToProfile: boolean;
|
|
45
36
|
showOrgName: boolean;
|
|
46
37
|
useDummyNotifications: boolean;
|
|
47
38
|
};
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
showRoutes(): void;
|
|
51
|
-
getTextColor(): any;
|
|
52
|
-
findInIncluded({ type, id }: {
|
|
53
|
-
type: any;
|
|
54
|
-
id: any;
|
|
55
|
-
}, included: any): any;
|
|
56
|
-
subscribeToJoltChannel(): void;
|
|
57
|
-
fetchNotifications(): void;
|
|
58
|
-
componentDidMount(): void;
|
|
59
|
-
render(): JSX.Element;
|
|
60
|
-
}
|
|
61
|
-
export declare class Route extends React.Component<{
|
|
39
|
+
};
|
|
40
|
+
declare const Route: ({ active, colors, style, ...nativeProps }: {
|
|
62
41
|
active: boolean;
|
|
42
|
+
children: React.ReactNode;
|
|
63
43
|
colors: any;
|
|
64
|
-
style?: object;
|
|
65
44
|
href?: string;
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
}> {
|
|
70
|
-
constructor(props: any);
|
|
71
|
-
render(): JSX.Element;
|
|
72
|
-
}
|
|
45
|
+
style?: object;
|
|
46
|
+
}) => JSX.Element;
|
|
47
|
+
export { Topbar, Route };
|
|
@@ -1,48 +1,45 @@
|
|
|
1
|
-
|
|
1
|
+
/// <reference types="react" />
|
|
2
2
|
import * as PCO_URL from "@planningcenter/url";
|
|
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
|
-
constructor(props: any);
|
|
39
|
-
static defaultProps: {
|
|
3
|
+
declare const Topbar: {
|
|
4
|
+
(props: {
|
|
5
|
+
apps: {
|
|
6
|
+
attributes: {
|
|
7
|
+
name: string;
|
|
8
|
+
url: string;
|
|
9
|
+
};
|
|
10
|
+
}[];
|
|
11
|
+
env: PCO_URL.Environment;
|
|
12
|
+
appName: string;
|
|
13
|
+
routes: any;
|
|
14
|
+
colors: any;
|
|
15
|
+
userAvatarPath: string;
|
|
16
|
+
userId: string;
|
|
17
|
+
userName: string;
|
|
18
|
+
orgName: string;
|
|
19
|
+
connectedPeople: {
|
|
20
|
+
id: number;
|
|
21
|
+
attributes: {
|
|
22
|
+
name: string;
|
|
23
|
+
organization_name: string;
|
|
24
|
+
};
|
|
25
|
+
}[];
|
|
26
|
+
style?: any;
|
|
27
|
+
currentRouteComponent?: any;
|
|
28
|
+
requestAppsFetch: any;
|
|
29
|
+
requestConnectedPeopleFetch: any;
|
|
30
|
+
requestUnlinkConnectedPeople: any;
|
|
31
|
+
requestSwitchConnectedPerson: any;
|
|
32
|
+
requestClearAppsCache: any;
|
|
33
|
+
requestClearConnectedPeopleCache: any;
|
|
34
|
+
useDummyNotifications?: boolean;
|
|
35
|
+
notifications?: any;
|
|
36
|
+
}): JSX.Element;
|
|
37
|
+
defaultProps: {
|
|
40
38
|
currentRouteComponent: (props: any) => JSX.Element;
|
|
41
39
|
};
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
}
|
|
45
|
-
export declare const Route: ({ active, ...props }: {
|
|
40
|
+
};
|
|
41
|
+
declare const Route: ({ active, ...props }: {
|
|
46
42
|
[x: string]: any;
|
|
47
43
|
active: any;
|
|
48
44
|
}) => JSX.Element;
|
|
45
|
+
export { Route, Topbar };
|
|
@@ -5,7 +5,8 @@ export declare const Bell: ({ dot, dotFill, fill, style, ...props }: {
|
|
|
5
5
|
fill?: string;
|
|
6
6
|
style?: object;
|
|
7
7
|
}) => JSX.Element;
|
|
8
|
-
export declare const BlankStateIcon: ({ style, ...nativeProps }: {
|
|
8
|
+
export declare const BlankStateIcon: ({ dark, style, ...nativeProps }: {
|
|
9
|
+
dark?: boolean;
|
|
9
10
|
style?: object;
|
|
10
11
|
}) => JSX.Element;
|
|
11
12
|
export declare const DisclosureChevronIcon: ({ colors, style, ...nativeProps }: {
|
|
@@ -16,6 +17,11 @@ export declare const HelpIcon: ({ colors, style, ...nativeProps }: {
|
|
|
16
17
|
colors: any;
|
|
17
18
|
style?: object;
|
|
18
19
|
}) => JSX.Element;
|
|
20
|
+
export declare const ExclamationTriangle: ({ fill, size, style, ...nativeProps }: {
|
|
21
|
+
fill?: string;
|
|
22
|
+
size: number;
|
|
23
|
+
style?: object;
|
|
24
|
+
}) => JSX.Element;
|
|
19
25
|
export declare const Spyglass: ({ fill, style, ...nativeProps }: {
|
|
20
26
|
fill?: string;
|
|
21
27
|
style?: object;
|