-
Notifications
You must be signed in to change notification settings - Fork 12
/
index.tsx
228 lines (221 loc) · 5.72 KB
/
index.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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
import React, { CSSProperties } from 'react'
export interface StepData {
/**
* Unique identifier for the step.
*/
id: string
/**
* Name of the step when shown in a list view
*/
stepName?: string
/**
* Title of the step
*/
title?: string
/**
* Subtitle of the step
*/
subtitle?: string
/**
* Primary button title. If omitted, the primary button will not be shown.
*/
primaryButtonTitle?: string
/**
* Primary button URI.
*/
primaryButtonUri?: string
/**
* Primary button URI target (either _blank or _self)
*/
primaryButtonUriTarget?: string
/**
* Secondary button title. If omitted, the secondary button will not be shown.
*/
secondaryButtonTitle?: string
/**
* Secondary button URI.
*/
secondaryButtonUri?: string
/**
* Secondary button URI target (either _blank or _self)
*/
secondaryButtonUriTarget?: string
/**
* Text on button if a back button is present
*/
backButtonTitle?: string
/**
* If true, the step will be marked as completed when the secondary button is clicked.
*/
skippable?: boolean
/**
* @deprecated use primaryButtonUri instead
*/
url?: string
/**
* @deprecated use primaryButtonUriTarget instead
*/
urlTarget?: string
type?: string
/**
* Video url to be shown for components supporting video.
*/
videoUri?: string
/**
* Image url to be shown for components supporting image.
*/
imageUri?: string | null
/**
* Automatically mark the step as completed when the primary button is clicked. Default is false.
*/
autoMarkCompleted?: boolean
/**
* Whether the step is completed.
*/
complete: boolean
/**
* Whether the step has been started by the user. True if either the step was marked started or completed.
*/
started: boolean
/**
* Whether the step is currently active/the flow is currently on this step. Can only be true for on step at a time.
*/
currentlyActive: boolean
/**
* Whether the step is blocked (can't be accessed yet)
*/
blocked?: boolean
/**
* Whether the step is hidden (not shown in the list view)
*/
hidden?: boolean
StepContent?: React.ReactNode
/**
* Handler for when the primary button is clicked.
*/
handlePrimaryButtonClick?: () => void
/**
* Handler for when the secondary button is clicked.
*/
handleSecondaryButtonClick?: () => void
ctaActionType?: 'complete'
props?: any
/**
* Criteria that needs to be met for the step to complete
*/
completionCriteria?: string
/**
* Criteria that needs to be met for the step to start
*/
startCriteria?: string
progress?: number
/**
* Whether the step is dismissible (for instance, tooltips or other non-essential steps)
*/
dismissible?: boolean
/**
* Whether to show a highlight in the page where the step is shown. Typically used in tooltips for creating small pings.
*/
showHighlight?: boolean
/**
* Any other additional props defined in config.yml
*/
[x: string | number | symbol]: unknown
}
export interface DefaultFrigadeFlowProps {
flowId: string
style?: CSSProperties
className?: string
/**
* The appearance of the flow. See https://docs.frigade.com/sdk/styling
*/
appearance?: Appearance
/**
* Dynamic variables to use in config.yml. See https://docs.frigade.com/flows/dynamic-variables
*/
customVariables?: { [key: string]: string | number | boolean }
hideOnFlowCompletion?: boolean
/**
* Handler for when a step is completed.
* @param step
* @param index
* @param nextStep
* @param allFormData All form data collected so far (only applicable to FrigadeForms)
* @param stepSpecificFormData Form data collected for the finished step (only applicable to FrigadeForms)
*/
onStepCompletion?: (
step: StepData,
index: number,
nextStep?: StepData,
allFormData?: any,
stepSpecificFormData?: any
) => boolean
/**
* Handler for when a primary or secondary CTA is clicked (regardless if step is completed or not).
* Return true if your app performs an action (e.g. open other modal or page transition).
* @param step
* @param index
* @param cta
*/
onButtonClick?: (
step: StepData,
index?: number,
cta?: 'primary' | 'secondary' | 'link' | 'back' | 'collapse' | 'expand',
nextStep?: StepData
) => boolean
onDismiss?: () => void
onComplete?: () => void
}
export interface Appearance {
/**
* Overrides of individual components and classes.
* This map can either be className(s) or CSSProperties.
*/
styleOverrides?: {
[key: string]: CSSProperties | string
}
/**
* The base theme to use with Frigade components.
*/
theme?: BaseTheme
}
export interface BaseTheme {
/**
* The base theme color used on CTAs and other primary elements.
*/
colorPrimary?: string
/**
* Secondary color, used for CTAs and other secondary elements.
*/
colorSecondary?: string
colorBackground?: string
colorBackgroundSecondary?: string
colorText?: string
colorTextOnPrimaryBackground?: string
colorTextSecondary?: string
colorTextDisabled?: string
colorTextError?: string
colorTextSuccess?: string
colorBorder?: string
fontSize?: string | number
fontSmoothing?: string
fontWeight?: string | number
borderRadius?: number
modalContainer?: CSSProperties
}
export const DefaultAppearance: Appearance = {
theme: {
colorPrimary: '#0171F8',
colorSecondary: '#2E343D',
colorText: '#0F1114',
colorBackground: '#ffffff',
colorBackgroundSecondary: '#d2d2d2',
colorTextOnPrimaryBackground: '#ffffff',
colorTextSecondary: '#2E343D',
colorTextDisabled: '#5A6472',
colorBorder: '#E5E5E5',
colorTextError: '#c00000',
colorTextSuccess: '#00D149',
borderRadius: 10,
},
}