1.7 KB68 lines
Blame
1/**
2 * Copyright (c) Meta Platforms, Inc. and affiliates.
3 *
4 * This source code is licensed under the MIT license found in the
5 * LICENSE file in the root directory of this source tree.
6 */
7
8import type {MultiStepperContext} from './MultiStepperContext';
9
10import * as stylex from '@stylexjs/stylex';
11
12const styles = stylex.create({
13 container: {
14 overflowY: 'hidden',
15 height: '100%',
16 },
17 contentLayout: {
18 display: 'flex',
19 flexDirection: 'row',
20 gap: '24px',
21 height: '100%',
22 },
23 leftContentContainer: {
24 flexShrink: 0,
25 minWidth: '200px',
26 },
27 stepContent: {
28 flex: 1,
29 overflowY: 'auto',
30 },
31});
32
33type Props<TKey> = {
34 /**
35 * Stepper state to control the current step and navigation.
36 */
37 stepper: MultiStepperContext<TKey>;
38
39 /**
40 * Optional left content to display on the left side of the stepper.
41 */
42 leftContent?: React.ReactNode;
43
44 /**
45 * The content to display in each step.
46 * Each child corresponds to a step in the stepper.
47 */
48 children: Array<React.ReactNode>;
49};
50
51/**
52 * Component to render a set of steps, providing a way to navigate between
53 * the steps and display the content for each step.
54 *
55 * Within the content of each step, you can use the `useMultiStepperContext` hook
56 * to access the current step and navigate to other steps.
57 */
58export function MultiStepper<TKey>({leftContent, stepper, children}: Props<TKey>) {
59 return (
60 <div {...stylex.props(styles.container)}>
61 <div {...stylex.props(styles.contentLayout)}>
62 {leftContent && <div {...stylex.props(styles.leftContentContainer)}>{leftContent}</div>}
63 <div {...stylex.props(styles.stepContent)}>{children[stepper.getStepIndex()]}</div>
64 </div>
65 </div>
66 );
67}
68