@wix/site-service-lightbox 1.0.1 → 1.0.3
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/README.md
CHANGED
|
@@ -1,18 +1,166 @@
|
|
|
1
1
|
import type { ServiceDefinition } from '@wix/services-definitions';
|
|
2
|
+
/**
|
|
3
|
+
* Value you specify when you open a popup. It can be any value. The service passes it through without
|
|
4
|
+
* reading or copying it.
|
|
5
|
+
*/
|
|
2
6
|
export type LightboxContext = unknown;
|
|
7
|
+
/**
|
|
8
|
+
* Options for `open()`, with the popup to open and the value to open it with.
|
|
9
|
+
*/
|
|
3
10
|
export type LightboxOpenOptions<TContext = LightboxContext> = {
|
|
11
|
+
/**
|
|
12
|
+
* Page ID of the popup to open.
|
|
13
|
+
*
|
|
14
|
+
* This is the popup's key in the `pages` map of `@wix/site-service-pages`. The page's `popup` property
|
|
15
|
+
* must be `true`.
|
|
16
|
+
*
|
|
17
|
+
* It isn't the page's `appPageId`.
|
|
18
|
+
*
|
|
19
|
+
* @exampleValue 'k4q7s'
|
|
20
|
+
*/
|
|
4
21
|
pageId: string;
|
|
22
|
+
/**
|
|
23
|
+
* Information to pass to the popup. Components inside the popup read it with `getContext()`.
|
|
24
|
+
*
|
|
25
|
+
* @exampleValue `{ "productId": "spring-jacket" }`
|
|
26
|
+
*/
|
|
5
27
|
context?: TContext;
|
|
6
28
|
};
|
|
29
|
+
/**
|
|
30
|
+
* Values the host supplies when it creates the service.
|
|
31
|
+
*/
|
|
7
32
|
export type ILightboxServiceConfig = {
|
|
8
33
|
open: (options: LightboxOpenOptions) => Promise<void>;
|
|
9
34
|
close: () => void;
|
|
10
35
|
getContext: () => LightboxContext;
|
|
11
36
|
};
|
|
37
|
+
/**
|
|
38
|
+
* Opens and closes popups on a Wix site, and passes data to the popup that opens.
|
|
39
|
+
*/
|
|
12
40
|
export interface ILightboxService {
|
|
41
|
+
/**
|
|
42
|
+
* Opens a popup over the current page.
|
|
43
|
+
*
|
|
44
|
+
* Opening a popup closes any popup that's already open. If the popup is already open, it stays open,
|
|
45
|
+
* and its context is replaced with the `context` you specify, or with `undefined` if you omit
|
|
46
|
+
* `context`.
|
|
47
|
+
*
|
|
48
|
+
* @param options Options for opening the popup.
|
|
49
|
+
* @returns Promise that resolves with no value once the popup is open.
|
|
50
|
+
*
|
|
51
|
+
* @example Open a quick view popup from a button
|
|
52
|
+
* ```tsx
|
|
53
|
+
* import { useState } from 'react'
|
|
54
|
+
* import { useService } from '@wix/services-manager-react'
|
|
55
|
+
* import { LightboxDefinition } from '@wix/site-service-lightbox/definition'
|
|
56
|
+
*
|
|
57
|
+
* type QuickViewContext = { productId: string }
|
|
58
|
+
*
|
|
59
|
+
* function QuickViewButton({ productId }: { productId: string }) {
|
|
60
|
+
* const lightboxService = useService(LightboxDefinition)
|
|
61
|
+
* const [failed, setFailed] = useState(false)
|
|
62
|
+
*
|
|
63
|
+
* const openQuickView = () => {
|
|
64
|
+
* setFailed(false)
|
|
65
|
+
* lightboxService
|
|
66
|
+
* .open<QuickViewContext>({ pageId: 'k4q7s', context: { productId } })
|
|
67
|
+
* .catch(() => setFailed(true))
|
|
68
|
+
* }
|
|
69
|
+
*
|
|
70
|
+
* return (
|
|
71
|
+
* <>
|
|
72
|
+
* <button onClick={openQuickView}>Quick view</button>
|
|
73
|
+
* {failed && <p>Quick view isn't available right now.</p>}
|
|
74
|
+
* </>
|
|
75
|
+
* )
|
|
76
|
+
* }
|
|
77
|
+
* ```
|
|
78
|
+
*
|
|
79
|
+
* @example Open an app's popup found in the pages service
|
|
80
|
+
* ```ts
|
|
81
|
+
* // pagesService and lightboxService are resolved from @wix/site-service-pages and
|
|
82
|
+
* // @wix/site-service-lightbox, as in the first example. QuickViewContext is your own type for the
|
|
83
|
+
* // popup's context.
|
|
84
|
+
* function findPopupPageId(appPageId: string): string | undefined {
|
|
85
|
+
* const entry = Object.entries(pagesService.pages).find(([, page]) => page.popup && page.appPageId === appPageId)
|
|
86
|
+
*
|
|
87
|
+
* // The page ID is the map key, not the page's appPageId.
|
|
88
|
+
* return entry?.[0]
|
|
89
|
+
* }
|
|
90
|
+
*
|
|
91
|
+
* async function openAppPopup(appPageId: string, context: QuickViewContext) {
|
|
92
|
+
* const pageId = findPopupPageId(appPageId)
|
|
93
|
+
* if (!pageId) {
|
|
94
|
+
* return false
|
|
95
|
+
* }
|
|
96
|
+
*
|
|
97
|
+
* await lightboxService.open({ pageId, context })
|
|
98
|
+
* return true
|
|
99
|
+
* }
|
|
100
|
+
* ```
|
|
101
|
+
*/
|
|
13
102
|
open<TContext = LightboxContext>(options: LightboxOpenOptions<TContext>): Promise<void>;
|
|
103
|
+
/**
|
|
104
|
+
* Closes the open popup.
|
|
105
|
+
*
|
|
106
|
+
* It closes whichever popup is open, regardless of the component that calls it.
|
|
107
|
+
*
|
|
108
|
+
* Site visitors can also close a popup themselves, with its close button, the Escape key, or by
|
|
109
|
+
* going to another page.
|
|
110
|
+
*
|
|
111
|
+
* @example Close the popup from a button inside it
|
|
112
|
+
* ```tsx
|
|
113
|
+
* import { useService } from '@wix/services-manager-react'
|
|
114
|
+
* import { LightboxDefinition } from '@wix/site-service-lightbox/definition'
|
|
115
|
+
*
|
|
116
|
+
* function QuickViewCloseButton() {
|
|
117
|
+
* const lightboxService = useService(LightboxDefinition)
|
|
118
|
+
*
|
|
119
|
+
* return (
|
|
120
|
+
* <button aria-label="Close quick view" onClick={() => lightboxService.close()}>
|
|
121
|
+
* Close
|
|
122
|
+
* </button>
|
|
123
|
+
* )
|
|
124
|
+
* }
|
|
125
|
+
* ```
|
|
126
|
+
*/
|
|
14
127
|
close(): void;
|
|
15
|
-
/**
|
|
128
|
+
/**
|
|
129
|
+
* Retrieves the context of the open popup.
|
|
130
|
+
*
|
|
131
|
+
* It returns the context of whichever popup is open, regardless of the component that calls it, so call
|
|
132
|
+
* it from a component inside the popup.
|
|
133
|
+
*
|
|
134
|
+
* It takes no arguments. In TypeScript, you can specify the context's type in angle brackets, as in
|
|
135
|
+
* `getContext<QuickViewContext | undefined>()`. Use the type you specified for `context` in `open()`,
|
|
136
|
+
* plus `undefined`. TypeScript doesn't check that the two match, so a different type gives you wrong
|
|
137
|
+
* types without an error. Without a type, the return type is `unknown`.
|
|
138
|
+
*
|
|
139
|
+
* @returns Context of the open popup.
|
|
140
|
+
*
|
|
141
|
+
* `undefined` when no popup is open.
|
|
142
|
+
*
|
|
143
|
+
* @exampleValue `{ "productId": "spring-jacket" }`
|
|
144
|
+
*
|
|
145
|
+
* @example Show the product a quick view popup was opened with
|
|
146
|
+
* ```tsx
|
|
147
|
+
* import { useService } from '@wix/services-manager-react'
|
|
148
|
+
* import { LightboxDefinition } from '@wix/site-service-lightbox/definition'
|
|
149
|
+
*
|
|
150
|
+
* type QuickViewContext = { productId: string }
|
|
151
|
+
*
|
|
152
|
+
* function QuickViewDetails() {
|
|
153
|
+
* const lightboxService = useService(LightboxDefinition)
|
|
154
|
+
* const context = lightboxService.getContext<QuickViewContext | undefined>()
|
|
155
|
+
*
|
|
156
|
+
* if (!context) {
|
|
157
|
+
* return <p>Choose a product to see its details.</p>
|
|
158
|
+
* }
|
|
159
|
+
*
|
|
160
|
+
* return <ProductSummary productId={context.productId} />
|
|
161
|
+
* }
|
|
162
|
+
* ```
|
|
163
|
+
*/
|
|
16
164
|
getContext<TContext = LightboxContext>(): TContext;
|
|
17
165
|
}
|
|
18
166
|
export type ILightboxDefinition = ServiceDefinition<ILightboxService, ILightboxServiceConfig>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/definition/index.ts"],"names":[],"mappings":";;;AAAA,oEAAyD;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/definition/index.ts"],"names":[],"mappings":";;;AAAA,oEAAyD;AA6K5C,QAAA,kBAAkB,GAAG,IAAA,oCAAa,EAA2C,4BAA4B,CAAC,CAAA"}
|
|
@@ -1,18 +1,166 @@
|
|
|
1
1
|
import type { ServiceDefinition } from '@wix/services-definitions';
|
|
2
|
+
/**
|
|
3
|
+
* Value you specify when you open a popup. It can be any value. The service passes it through without
|
|
4
|
+
* reading or copying it.
|
|
5
|
+
*/
|
|
2
6
|
export type LightboxContext = unknown;
|
|
7
|
+
/**
|
|
8
|
+
* Options for `open()`, with the popup to open and the value to open it with.
|
|
9
|
+
*/
|
|
3
10
|
export type LightboxOpenOptions<TContext = LightboxContext> = {
|
|
11
|
+
/**
|
|
12
|
+
* Page ID of the popup to open.
|
|
13
|
+
*
|
|
14
|
+
* This is the popup's key in the `pages` map of `@wix/site-service-pages`. The page's `popup` property
|
|
15
|
+
* must be `true`.
|
|
16
|
+
*
|
|
17
|
+
* It isn't the page's `appPageId`.
|
|
18
|
+
*
|
|
19
|
+
* @exampleValue 'k4q7s'
|
|
20
|
+
*/
|
|
4
21
|
pageId: string;
|
|
22
|
+
/**
|
|
23
|
+
* Information to pass to the popup. Components inside the popup read it with `getContext()`.
|
|
24
|
+
*
|
|
25
|
+
* @exampleValue `{ "productId": "spring-jacket" }`
|
|
26
|
+
*/
|
|
5
27
|
context?: TContext;
|
|
6
28
|
};
|
|
29
|
+
/**
|
|
30
|
+
* Values the host supplies when it creates the service.
|
|
31
|
+
*/
|
|
7
32
|
export type ILightboxServiceConfig = {
|
|
8
33
|
open: (options: LightboxOpenOptions) => Promise<void>;
|
|
9
34
|
close: () => void;
|
|
10
35
|
getContext: () => LightboxContext;
|
|
11
36
|
};
|
|
37
|
+
/**
|
|
38
|
+
* Opens and closes popups on a Wix site, and passes data to the popup that opens.
|
|
39
|
+
*/
|
|
12
40
|
export interface ILightboxService {
|
|
41
|
+
/**
|
|
42
|
+
* Opens a popup over the current page.
|
|
43
|
+
*
|
|
44
|
+
* Opening a popup closes any popup that's already open. If the popup is already open, it stays open,
|
|
45
|
+
* and its context is replaced with the `context` you specify, or with `undefined` if you omit
|
|
46
|
+
* `context`.
|
|
47
|
+
*
|
|
48
|
+
* @param options Options for opening the popup.
|
|
49
|
+
* @returns Promise that resolves with no value once the popup is open.
|
|
50
|
+
*
|
|
51
|
+
* @example Open a quick view popup from a button
|
|
52
|
+
* ```tsx
|
|
53
|
+
* import { useState } from 'react'
|
|
54
|
+
* import { useService } from '@wix/services-manager-react'
|
|
55
|
+
* import { LightboxDefinition } from '@wix/site-service-lightbox/definition'
|
|
56
|
+
*
|
|
57
|
+
* type QuickViewContext = { productId: string }
|
|
58
|
+
*
|
|
59
|
+
* function QuickViewButton({ productId }: { productId: string }) {
|
|
60
|
+
* const lightboxService = useService(LightboxDefinition)
|
|
61
|
+
* const [failed, setFailed] = useState(false)
|
|
62
|
+
*
|
|
63
|
+
* const openQuickView = () => {
|
|
64
|
+
* setFailed(false)
|
|
65
|
+
* lightboxService
|
|
66
|
+
* .open<QuickViewContext>({ pageId: 'k4q7s', context: { productId } })
|
|
67
|
+
* .catch(() => setFailed(true))
|
|
68
|
+
* }
|
|
69
|
+
*
|
|
70
|
+
* return (
|
|
71
|
+
* <>
|
|
72
|
+
* <button onClick={openQuickView}>Quick view</button>
|
|
73
|
+
* {failed && <p>Quick view isn't available right now.</p>}
|
|
74
|
+
* </>
|
|
75
|
+
* )
|
|
76
|
+
* }
|
|
77
|
+
* ```
|
|
78
|
+
*
|
|
79
|
+
* @example Open an app's popup found in the pages service
|
|
80
|
+
* ```ts
|
|
81
|
+
* // pagesService and lightboxService are resolved from @wix/site-service-pages and
|
|
82
|
+
* // @wix/site-service-lightbox, as in the first example. QuickViewContext is your own type for the
|
|
83
|
+
* // popup's context.
|
|
84
|
+
* function findPopupPageId(appPageId: string): string | undefined {
|
|
85
|
+
* const entry = Object.entries(pagesService.pages).find(([, page]) => page.popup && page.appPageId === appPageId)
|
|
86
|
+
*
|
|
87
|
+
* // The page ID is the map key, not the page's appPageId.
|
|
88
|
+
* return entry?.[0]
|
|
89
|
+
* }
|
|
90
|
+
*
|
|
91
|
+
* async function openAppPopup(appPageId: string, context: QuickViewContext) {
|
|
92
|
+
* const pageId = findPopupPageId(appPageId)
|
|
93
|
+
* if (!pageId) {
|
|
94
|
+
* return false
|
|
95
|
+
* }
|
|
96
|
+
*
|
|
97
|
+
* await lightboxService.open({ pageId, context })
|
|
98
|
+
* return true
|
|
99
|
+
* }
|
|
100
|
+
* ```
|
|
101
|
+
*/
|
|
13
102
|
open<TContext = LightboxContext>(options: LightboxOpenOptions<TContext>): Promise<void>;
|
|
103
|
+
/**
|
|
104
|
+
* Closes the open popup.
|
|
105
|
+
*
|
|
106
|
+
* It closes whichever popup is open, regardless of the component that calls it.
|
|
107
|
+
*
|
|
108
|
+
* Site visitors can also close a popup themselves, with its close button, the Escape key, or by
|
|
109
|
+
* going to another page.
|
|
110
|
+
*
|
|
111
|
+
* @example Close the popup from a button inside it
|
|
112
|
+
* ```tsx
|
|
113
|
+
* import { useService } from '@wix/services-manager-react'
|
|
114
|
+
* import { LightboxDefinition } from '@wix/site-service-lightbox/definition'
|
|
115
|
+
*
|
|
116
|
+
* function QuickViewCloseButton() {
|
|
117
|
+
* const lightboxService = useService(LightboxDefinition)
|
|
118
|
+
*
|
|
119
|
+
* return (
|
|
120
|
+
* <button aria-label="Close quick view" onClick={() => lightboxService.close()}>
|
|
121
|
+
* Close
|
|
122
|
+
* </button>
|
|
123
|
+
* )
|
|
124
|
+
* }
|
|
125
|
+
* ```
|
|
126
|
+
*/
|
|
14
127
|
close(): void;
|
|
15
|
-
/**
|
|
128
|
+
/**
|
|
129
|
+
* Retrieves the context of the open popup.
|
|
130
|
+
*
|
|
131
|
+
* It returns the context of whichever popup is open, regardless of the component that calls it, so call
|
|
132
|
+
* it from a component inside the popup.
|
|
133
|
+
*
|
|
134
|
+
* It takes no arguments. In TypeScript, you can specify the context's type in angle brackets, as in
|
|
135
|
+
* `getContext<QuickViewContext | undefined>()`. Use the type you specified for `context` in `open()`,
|
|
136
|
+
* plus `undefined`. TypeScript doesn't check that the two match, so a different type gives you wrong
|
|
137
|
+
* types without an error. Without a type, the return type is `unknown`.
|
|
138
|
+
*
|
|
139
|
+
* @returns Context of the open popup.
|
|
140
|
+
*
|
|
141
|
+
* `undefined` when no popup is open.
|
|
142
|
+
*
|
|
143
|
+
* @exampleValue `{ "productId": "spring-jacket" }`
|
|
144
|
+
*
|
|
145
|
+
* @example Show the product a quick view popup was opened with
|
|
146
|
+
* ```tsx
|
|
147
|
+
* import { useService } from '@wix/services-manager-react'
|
|
148
|
+
* import { LightboxDefinition } from '@wix/site-service-lightbox/definition'
|
|
149
|
+
*
|
|
150
|
+
* type QuickViewContext = { productId: string }
|
|
151
|
+
*
|
|
152
|
+
* function QuickViewDetails() {
|
|
153
|
+
* const lightboxService = useService(LightboxDefinition)
|
|
154
|
+
* const context = lightboxService.getContext<QuickViewContext | undefined>()
|
|
155
|
+
*
|
|
156
|
+
* if (!context) {
|
|
157
|
+
* return <p>Choose a product to see its details.</p>
|
|
158
|
+
* }
|
|
159
|
+
*
|
|
160
|
+
* return <ProductSummary productId={context.productId} />
|
|
161
|
+
* }
|
|
162
|
+
* ```
|
|
163
|
+
*/
|
|
16
164
|
getContext<TContext = LightboxContext>(): TContext;
|
|
17
165
|
}
|
|
18
166
|
export type ILightboxDefinition = ServiceDefinition<ILightboxService, ILightboxServiceConfig>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/definition/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAA;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/definition/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAA;AA6KzD,MAAM,CAAC,MAAM,kBAAkB,GAAG,aAAa,CAA2C,4BAA4B,CAAC,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wix/site-service-lightbox",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.3",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"files": [
|
|
6
6
|
"dist",
|
|
@@ -48,8 +48,8 @@
|
|
|
48
48
|
},
|
|
49
49
|
"scripts": {
|
|
50
50
|
"build": "tsc -b . && tsc --project tsconfig.cjs.json",
|
|
51
|
-
"lint": "
|
|
52
|
-
"test": "vitest --run &&
|
|
51
|
+
"lint": "pnpm --workspace-root run lint:package --package $npm_package_name",
|
|
52
|
+
"test": "vitest --run && pnpm run test-type-check",
|
|
53
53
|
"test-type-check": "echo 'validating typescript in test files' && tsc --project tsconfig.test.json && echo 'Finished validating typescript in test files successfully'"
|
|
54
54
|
},
|
|
55
55
|
"dependencies": {
|
|
@@ -77,5 +77,5 @@
|
|
|
77
77
|
]
|
|
78
78
|
}
|
|
79
79
|
},
|
|
80
|
-
"falconPackageHash": "
|
|
80
|
+
"falconPackageHash": "f85feecbb340d2c928a288cc6e4f3a39471db0dcea8fe4861fb2513c"
|
|
81
81
|
}
|
package/src/definition/index.ts
CHANGED
|
@@ -1,23 +1,171 @@
|
|
|
1
1
|
import { defineService } from '@wix/services-definitions'
|
|
2
2
|
import type { ServiceDefinition } from '@wix/services-definitions'
|
|
3
3
|
|
|
4
|
+
/**
|
|
5
|
+
* Value you specify when you open a popup. It can be any value. The service passes it through without
|
|
6
|
+
* reading or copying it.
|
|
7
|
+
*/
|
|
4
8
|
export type LightboxContext = unknown
|
|
5
9
|
|
|
10
|
+
/**
|
|
11
|
+
* Options for `open()`, with the popup to open and the value to open it with.
|
|
12
|
+
*/
|
|
6
13
|
export type LightboxOpenOptions<TContext = LightboxContext> = {
|
|
14
|
+
/**
|
|
15
|
+
* Page ID of the popup to open.
|
|
16
|
+
*
|
|
17
|
+
* This is the popup's key in the `pages` map of `@wix/site-service-pages`. The page's `popup` property
|
|
18
|
+
* must be `true`.
|
|
19
|
+
*
|
|
20
|
+
* It isn't the page's `appPageId`.
|
|
21
|
+
*
|
|
22
|
+
* @exampleValue 'k4q7s'
|
|
23
|
+
*/
|
|
7
24
|
pageId: string
|
|
25
|
+
/**
|
|
26
|
+
* Information to pass to the popup. Components inside the popup read it with `getContext()`.
|
|
27
|
+
*
|
|
28
|
+
* @exampleValue `{ "productId": "spring-jacket" }`
|
|
29
|
+
*/
|
|
8
30
|
context?: TContext
|
|
9
31
|
}
|
|
10
32
|
|
|
33
|
+
/**
|
|
34
|
+
* Values the host supplies when it creates the service.
|
|
35
|
+
*/
|
|
11
36
|
export type ILightboxServiceConfig = {
|
|
12
37
|
open: (options: LightboxOpenOptions) => Promise<void>
|
|
13
38
|
close: () => void
|
|
14
39
|
getContext: () => LightboxContext
|
|
15
40
|
}
|
|
16
41
|
|
|
42
|
+
/**
|
|
43
|
+
* Opens and closes popups on a Wix site, and passes data to the popup that opens.
|
|
44
|
+
*/
|
|
17
45
|
export interface ILightboxService {
|
|
46
|
+
/**
|
|
47
|
+
* Opens a popup over the current page.
|
|
48
|
+
*
|
|
49
|
+
* Opening a popup closes any popup that's already open. If the popup is already open, it stays open,
|
|
50
|
+
* and its context is replaced with the `context` you specify, or with `undefined` if you omit
|
|
51
|
+
* `context`.
|
|
52
|
+
*
|
|
53
|
+
* @param options Options for opening the popup.
|
|
54
|
+
* @returns Promise that resolves with no value once the popup is open.
|
|
55
|
+
*
|
|
56
|
+
* @example Open a quick view popup from a button
|
|
57
|
+
* ```tsx
|
|
58
|
+
* import { useState } from 'react'
|
|
59
|
+
* import { useService } from '@wix/services-manager-react'
|
|
60
|
+
* import { LightboxDefinition } from '@wix/site-service-lightbox/definition'
|
|
61
|
+
*
|
|
62
|
+
* type QuickViewContext = { productId: string }
|
|
63
|
+
*
|
|
64
|
+
* function QuickViewButton({ productId }: { productId: string }) {
|
|
65
|
+
* const lightboxService = useService(LightboxDefinition)
|
|
66
|
+
* const [failed, setFailed] = useState(false)
|
|
67
|
+
*
|
|
68
|
+
* const openQuickView = () => {
|
|
69
|
+
* setFailed(false)
|
|
70
|
+
* lightboxService
|
|
71
|
+
* .open<QuickViewContext>({ pageId: 'k4q7s', context: { productId } })
|
|
72
|
+
* .catch(() => setFailed(true))
|
|
73
|
+
* }
|
|
74
|
+
*
|
|
75
|
+
* return (
|
|
76
|
+
* <>
|
|
77
|
+
* <button onClick={openQuickView}>Quick view</button>
|
|
78
|
+
* {failed && <p>Quick view isn't available right now.</p>}
|
|
79
|
+
* </>
|
|
80
|
+
* )
|
|
81
|
+
* }
|
|
82
|
+
* ```
|
|
83
|
+
*
|
|
84
|
+
* @example Open an app's popup found in the pages service
|
|
85
|
+
* ```ts
|
|
86
|
+
* // pagesService and lightboxService are resolved from @wix/site-service-pages and
|
|
87
|
+
* // @wix/site-service-lightbox, as in the first example. QuickViewContext is your own type for the
|
|
88
|
+
* // popup's context.
|
|
89
|
+
* function findPopupPageId(appPageId: string): string | undefined {
|
|
90
|
+
* const entry = Object.entries(pagesService.pages).find(([, page]) => page.popup && page.appPageId === appPageId)
|
|
91
|
+
*
|
|
92
|
+
* // The page ID is the map key, not the page's appPageId.
|
|
93
|
+
* return entry?.[0]
|
|
94
|
+
* }
|
|
95
|
+
*
|
|
96
|
+
* async function openAppPopup(appPageId: string, context: QuickViewContext) {
|
|
97
|
+
* const pageId = findPopupPageId(appPageId)
|
|
98
|
+
* if (!pageId) {
|
|
99
|
+
* return false
|
|
100
|
+
* }
|
|
101
|
+
*
|
|
102
|
+
* await lightboxService.open({ pageId, context })
|
|
103
|
+
* return true
|
|
104
|
+
* }
|
|
105
|
+
* ```
|
|
106
|
+
*/
|
|
18
107
|
open<TContext = LightboxContext>(options: LightboxOpenOptions<TContext>): Promise<void>
|
|
108
|
+
/**
|
|
109
|
+
* Closes the open popup.
|
|
110
|
+
*
|
|
111
|
+
* It closes whichever popup is open, regardless of the component that calls it.
|
|
112
|
+
*
|
|
113
|
+
* Site visitors can also close a popup themselves, with its close button, the Escape key, or by
|
|
114
|
+
* going to another page.
|
|
115
|
+
*
|
|
116
|
+
* @example Close the popup from a button inside it
|
|
117
|
+
* ```tsx
|
|
118
|
+
* import { useService } from '@wix/services-manager-react'
|
|
119
|
+
* import { LightboxDefinition } from '@wix/site-service-lightbox/definition'
|
|
120
|
+
*
|
|
121
|
+
* function QuickViewCloseButton() {
|
|
122
|
+
* const lightboxService = useService(LightboxDefinition)
|
|
123
|
+
*
|
|
124
|
+
* return (
|
|
125
|
+
* <button aria-label="Close quick view" onClick={() => lightboxService.close()}>
|
|
126
|
+
* Close
|
|
127
|
+
* </button>
|
|
128
|
+
* )
|
|
129
|
+
* }
|
|
130
|
+
* ```
|
|
131
|
+
*/
|
|
19
132
|
close(): void
|
|
20
|
-
/**
|
|
133
|
+
/**
|
|
134
|
+
* Retrieves the context of the open popup.
|
|
135
|
+
*
|
|
136
|
+
* It returns the context of whichever popup is open, regardless of the component that calls it, so call
|
|
137
|
+
* it from a component inside the popup.
|
|
138
|
+
*
|
|
139
|
+
* It takes no arguments. In TypeScript, you can specify the context's type in angle brackets, as in
|
|
140
|
+
* `getContext<QuickViewContext | undefined>()`. Use the type you specified for `context` in `open()`,
|
|
141
|
+
* plus `undefined`. TypeScript doesn't check that the two match, so a different type gives you wrong
|
|
142
|
+
* types without an error. Without a type, the return type is `unknown`.
|
|
143
|
+
*
|
|
144
|
+
* @returns Context of the open popup.
|
|
145
|
+
*
|
|
146
|
+
* `undefined` when no popup is open.
|
|
147
|
+
*
|
|
148
|
+
* @exampleValue `{ "productId": "spring-jacket" }`
|
|
149
|
+
*
|
|
150
|
+
* @example Show the product a quick view popup was opened with
|
|
151
|
+
* ```tsx
|
|
152
|
+
* import { useService } from '@wix/services-manager-react'
|
|
153
|
+
* import { LightboxDefinition } from '@wix/site-service-lightbox/definition'
|
|
154
|
+
*
|
|
155
|
+
* type QuickViewContext = { productId: string }
|
|
156
|
+
*
|
|
157
|
+
* function QuickViewDetails() {
|
|
158
|
+
* const lightboxService = useService(LightboxDefinition)
|
|
159
|
+
* const context = lightboxService.getContext<QuickViewContext | undefined>()
|
|
160
|
+
*
|
|
161
|
+
* if (!context) {
|
|
162
|
+
* return <p>Choose a product to see its details.</p>
|
|
163
|
+
* }
|
|
164
|
+
*
|
|
165
|
+
* return <ProductSummary productId={context.productId} />
|
|
166
|
+
* }
|
|
167
|
+
* ```
|
|
168
|
+
*/
|
|
21
169
|
getContext<TContext = LightboxContext>(): TContext
|
|
22
170
|
}
|
|
23
171
|
|