← All changes
|
src/Agent/workflows/canvas/components/DemoForm.jsx
+36
-31
3.1.5
→
3.2.2
View file →
| @@ -204,13 +204,14 @@ | ||
| 204 | 204 | ); |
| 205 | 205 | }; |
| 206 | 206 | |
| 207 | 207 | const StepCard = ({ step, index, activeStep, isLast, onFinish }) => { |
| 208 | - const { values, setValue, goToStep } = useCanvasStore(); | |
| 208 | + const { values, setValue, goToStep, reached } = useCanvasStore(); | |
| 209 | 209 | const reduceMotion = useReducedMotion(); |
| 210 | 210 | const card = useRef(null); |
| 211 | 211 | const active = index === activeStep; |
| 212 | 212 | const done = index < activeStep; |
| 213 | + const opened = index <= reached; | |
| 213 | 214 | |
| 214 | 215 | useEffect(() => { |
| 215 | 216 | if (!active) return; |
| 216 | 217 | let cancelScroll = () => {}; |
| @@ -245,41 +246,45 @@ | ||
| 245 | 246 | <div className="flex items-center gap-2 border-0 border-b border-solid border-gray-200 px-4 py-3 text-sm font-medium text-gray-900"> |
| 246 | 247 | <StepBadge index={index} active={active} done={done} /> |
| 247 | 248 | {step.title} |
| 248 | 249 | </div> |
| 249 | - <div className="flex min-w-0 flex-col gap-4 p-4"> | |
| 250 | - {Object.entries(step.inputSchema.properties).map( | |
| 251 | - ([name, property]) => ( | |
| 252 | - <Field | |
| 253 | - key={name} | |
| 254 | - name={name} | |
| 255 | - property={property} | |
| 256 | - value={values[name] ?? ''} | |
| 257 | - onChange={(value) => setValue(name, value)} | |
| 258 | - /> | |
| 259 | - ), | |
| 260 | - )} | |
| 261 | - </div> | |
| 250 | + {opened ? ( | |
| 251 | + <div className="flex min-w-0 flex-col gap-4 p-4"> | |
| 252 | + {Object.entries(step.inputSchema.properties).map( | |
| 253 | + ([name, property]) => ( | |
| 254 | + <Field | |
| 255 | + key={name} | |
| 256 | + name={name} | |
| 257 | + property={property} | |
| 258 | + value={values[name] ?? ''} | |
| 259 | + onChange={(value) => setValue(name, value)} | |
| 260 | + /> | |
| 261 | + ), | |
| 262 | + )} | |
| 263 | + </div> | |
| 264 | + ) : null} | |
| 262 | 265 | </div> |
| 263 | - <div className="flex justify-end gap-2 p-3"> | |
| 264 | - {index > 0 ? ( | |
| 266 | + {opened ? ( | |
| 267 | + <div className="flex justify-end gap-2 p-3"> | |
| 268 | + {index > 0 ? ( | |
| 269 | + <button | |
| 270 | + type="button" | |
| 271 | + className="rounded-sm border border-gray-500 bg-white px-4 py-2 text-sm text-gray-900" | |
| 272 | + onClick={() => goToStep(index - 1)} | |
| 273 | + > | |
| 274 | + {__('Back', 'extendify-local')} | |
| 275 | + </button> | |
| 276 | + ) : null} | |
| 265 | 277 | <button |
| 266 | - type="button" | |
| 267 | - className="rounded-sm border border-gray-500 bg-white px-4 py-2 text-sm text-gray-900" | |
| 268 | - onClick={() => goToStep(index - 1)} | |
| 278 | + type="submit" | |
| 279 | + className="rounded-sm border border-design-main bg-design-main px-4 py-2 text-sm text-white" | |
| 269 | 280 | > |
| 270 | - {__('Back', 'extendify-local')} | |
| 281 | + {isLast | |
| 282 | + ? __('Submit', 'extendify-local') | |
| 283 | + : __('Next', 'extendify-local')} | |
| 271 | 284 | </button> |
| 272 | - ) : null} | |
| 273 | - <button | |
| 274 | - type="submit" | |
| 275 | - className="rounded-sm border border-design-main bg-design-main px-4 py-2 text-sm text-white" | |
| 276 | - > | |
| 277 | - {isLast | |
| 278 | - ? __('Submit', 'extendify-local') | |
| 279 | - : __('Next', 'extendify-local')} | |
| 280 | - </button> | |
| 281 | - </div> | |
| 285 | + </div> | |
| 286 | + ) : null} | |
| 282 | 287 | </fieldset> |
| 283 | 288 | </form> |
| 284 | 289 | </div> |
| 285 | 290 | ); |
| @@ -330,9 +335,9 @@ | ||
| 330 | 335 | ); |
| 331 | 336 | } |
| 332 | 337 | |
| 333 | 338 | return ( |
| 334 | - <div className="flex flex-col gap-3 pb-[70vh]"> | |
| 339 | + <div className="flex flex-col gap-3 pb-[200px]"> | |
| 335 | 340 | {steps.map((step, index) => ( |
| 336 | 341 | <StepCard |
| 337 | 342 | key={step.id} |
| 338 | 343 | step={step} |