Makes WizardForm translation agnostic (#6111)
parent
533e208643
commit
f254711d85
|
@ -35,7 +35,14 @@ export default function Setup(props: inferSSRProps<typeof getServerSideProps>) {
|
|||
return (
|
||||
<>
|
||||
<main className="flex items-center bg-gray-100 print:h-full">
|
||||
<WizardForm href="/auth/setup" steps={steps} />
|
||||
<WizardForm
|
||||
href="/auth/setup"
|
||||
steps={steps}
|
||||
nextLabel={t("next_step_text")}
|
||||
finishLabel={t("finish")}
|
||||
prevLabel={t("prev_step")}
|
||||
stepLabel={(currentStep, maxSteps) => t("current_step_of_total", { currentStep, maxSteps })}
|
||||
/>
|
||||
</main>
|
||||
</>
|
||||
);
|
||||
|
|
|
@ -1,8 +1,5 @@
|
|||
import { TFunction } from "next-i18next";
|
||||
import Link from "next/link";
|
||||
|
||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
|
||||
type DefaultStep = {
|
||||
title: string;
|
||||
};
|
||||
|
@ -12,20 +9,18 @@ function Stepper<T extends DefaultStep>(props: {
|
|||
step: number;
|
||||
steps: T[];
|
||||
disableSteps?: boolean;
|
||||
t?: TFunction;
|
||||
stepLabel?: (currentStep: number, totalSteps: number) => string;
|
||||
}) {
|
||||
let { t } = useLocale();
|
||||
if (props.t) {
|
||||
t = props.t;
|
||||
}
|
||||
const { href, steps } = props;
|
||||
const {
|
||||
href,
|
||||
steps,
|
||||
stepLabel = (currentStep, totalSteps) => `Step ${currentStep} of ${totalSteps}`,
|
||||
} = props;
|
||||
return (
|
||||
<>
|
||||
{steps.length > 1 && (
|
||||
<nav className="flex items-center justify-center" aria-label="Progress">
|
||||
<p className="text-sm font-medium">
|
||||
{t("current_step_of_total", { currentStep: props.step, maxSteps: steps.length })}
|
||||
</p>
|
||||
<p className="text-sm font-medium">{stepLabel(props.step, steps.length)}</p>
|
||||
<ol role="list" className="ml-8 flex items-center space-x-5">
|
||||
{steps.map((mapStep, index) => (
|
||||
<li key={mapStep.title}>
|
||||
|
|
|
@ -1,8 +1,7 @@
|
|||
import { TFunction } from "next-i18next";
|
||||
import { useRouter } from "next/router";
|
||||
import { ComponentProps } from "react";
|
||||
|
||||
import classNames from "@calcom/lib/classNames";
|
||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
|
||||
import { Button, Stepper } from "../..";
|
||||
|
||||
|
@ -19,13 +18,12 @@ function WizardForm<T extends DefaultStep>(props: {
|
|||
steps: T[];
|
||||
disableNavigation?: boolean;
|
||||
containerClassname?: string;
|
||||
t?: TFunction;
|
||||
prevLabel?: string;
|
||||
nextLabel?: string;
|
||||
finishLabel?: string;
|
||||
stepLabel?: ComponentProps<typeof Stepper>["stepLabel"];
|
||||
}) {
|
||||
const { href, steps } = props;
|
||||
let { t } = useLocale();
|
||||
if (props.t) {
|
||||
t = props.t;
|
||||
}
|
||||
const { href, steps, nextLabel = "Next", finishLabel = "Finish", prevLabel = "Back", stepLabel } = props;
|
||||
const router = useRouter();
|
||||
const step = parseInt((router.query.step as string) || "1");
|
||||
const currentStep = steps[step - 1];
|
||||
|
@ -58,7 +56,7 @@ function WizardForm<T extends DefaultStep>(props: {
|
|||
onClick={() => {
|
||||
setStep(step - 1);
|
||||
}}>
|
||||
{t("prev_step")}
|
||||
{prevLabel}
|
||||
</Button>
|
||||
)}
|
||||
|
||||
|
@ -69,7 +67,7 @@ function WizardForm<T extends DefaultStep>(props: {
|
|||
color="primary"
|
||||
form={`wizard-step-${step}`}
|
||||
className="relative ml-2">
|
||||
{step < steps.length ? t("next_step_text") : t("finish")}
|
||||
{step < steps.length ? nextLabel : finishLabel}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
@ -78,7 +76,7 @@ function WizardForm<T extends DefaultStep>(props: {
|
|||
</div>
|
||||
{!props.disableNavigation && (
|
||||
<div className="print:hidden">
|
||||
<Stepper href={href} step={step} steps={steps} disableSteps t={t} />
|
||||
<Stepper href={href} step={step} steps={steps} disableSteps stepLabel={stepLabel} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue