ModalWizard

1
import {Button, Flex, ModalWizard, ModalWizardStepProps, TextInput, Title, useForm} from '@coveord/plasma-mantine';
2
import {useState} from 'react';
3

4
export default () => {
5
    const [opened, setOpened] = useState(false);
6

7
    const form = useForm({
8
        initialValues: {
9
            firstName: '',
10
            lastName: '',
11
        },
12
        validate: {
13
            firstName: (value) => (value.length < 2 ? 'Minimum 2 characters required' : null),
14
            lastName: (value) => (value.length < 2 ? 'Minimum 2 characters required' : null),
15
        },
16
    });
17

18
    const Steps: Array<Omit<ModalWizardStepProps, 'children'> & {element: JSX.Element}> = [
19
        {
20
            docLink: 'https://coveo.com',
21
            title: 'Current Step is 1',
22
            docLinkTooltipLabel: 'Tooltip label',
23
            element: (
24
                <Flex direction="column" gap="sm">
25
                    <Title order={5}>First Name</Title>
26

27
                    <TextInput {...form.getInputProps('firstName')} placeholder="Enter first name" />
28
                </Flex>
29
            ),
30
        },
31
        {
32
            docLink: 'https://coveo.com',
33
            title: 'Current Step is 2',
34
            docLinkTooltipLabel: 'Tooltip label',
35
            element: (
36
                <Flex direction="column" gap="sm">
37
                    <Title order={5}>Last Name</Title>
38
                    <TextInput {...form.getInputProps('lastName')} placeholder="Enter last name" />
39
                </Flex>
40
            ),
41
        },
42
    ];
43

44
    return (
45
        <>
46
            <Button m="md" onClick={() => setOpened(true)}>
47
                Open ModalWizard
48
            </Button>
49
            <ModalWizard
50
                isStepValidatedOnNext
51
                size="sm"
52
                onClose={() => {
53
                    setOpened(false);
54
                    form.reset();
55
                }}
56
                opened={opened}
57
                onFinish={async () => {
58
                    form.validateField('lastName');
59
                    if (form.isValid('lastName') && form.isDirty('lastName')) {
60
                        setOpened(false);
61
                        form.reset();
62
                    }
63
                }}
64
                onNext={async (newStepIndex, setCurrentStepIndex) => {
65
                    form.validateField('firstName');
66
                    if (form.isValid('firstName') && form.isDirty('firstName')) {
67
                        setCurrentStepIndex(newStepIndex);
68
                    }
69
                }}
70
            >
71
                {Steps.map((step, index) => (
72
                    <ModalWizard.Step
73
                        key={index}
74
                        docLink={step.docLink}
75
                        title={step.title}
76
                        description={step.description}
77
                        showProgressBar={step.showProgressBar}
78
                        countsAsProgress={step.countsAsProgress}
79
                    >
80
                        {step.element}
81
                    </ModalWizard.Step>
82
                ))}
83
            </ModalWizard>
84
        </>
85
    );
86
};

1
import {Box, Button, ModalWizard} from '@coveord/plasma-mantine';
2
import {useState} from 'react';
3

4
export default () => {
5
    const [opened, setOpened] = useState(false);
6

7
    return (
8
        <>
9
            <Button m="md" onClick={() => setOpened(true)}>
10
                Open Modal Wizard
11
            </Button>
12
            <ModalWizard onClose={() => setOpened(false)} opened={opened} onFinish={() => setOpened(false)}>
13
                <ModalWizard.Step
14
                    docLink="https://coveo.com"
15
                    title="Current Step is 1"
16
                    showProgressBar={false}
17
                    countsAsProgress={false}
18
                    description="Description of step 1"
19
                    validateStep={() => ({isValid: true})}
20
                    docLinkTooltipLabel="Tooltip label"
21
                >
22
                    <Box mih={300}>Slide 1</Box>
23
                </ModalWizard.Step>
24
                <ModalWizard.Step
25
                    docLink="https://coveo.com"
26
                    title="Current Step is 2"
27
                    description="Description of step 2"
28
                    validateStep={() => ({isValid: false})}
29
                    docLinkTooltipLabel="Tooltip label"
30
                    disabledTooltipLabel="Tooltip label on disabled button"
31
                >
32
                    <Box mih={300}>Slide 2</Box>
33
                </ModalWizard.Step>
34
            </ModalWizard>
35
        </>
36
    );
37
};