Z8MB1E
2eb38c7a82
- Replace static descriptions in admin fields with dynamic `TickDurationDescription` components. - Add minimum and maximum constraints to duration fields in various schemas. - Update `TickDurationDescription` to use `useField` hook for better form integration.
27 lines
911 B
TypeScript
27 lines
911 B
TypeScript
"use client";
|
|
|
|
import { useField, useFormFields } from "@payloadcms/ui";
|
|
|
|
const calculateTicks = (value: number) => {
|
|
const totalMinutes = value * 10;
|
|
const days = Math.floor(value / 144);
|
|
const hours = Math.floor(totalMinutes / 60) % 24;
|
|
const minutes = totalMinutes % 60;
|
|
return `${days >= 1 ? `${days}d ` : ""}${hours}h ${minutes}m`;
|
|
};
|
|
|
|
export const TickDurationDescription = ({ task }: { task: string }) => {
|
|
const { value, setValue } = useField();
|
|
|
|
return value && typeof value === "number" ? (
|
|
<p className="field-description">
|
|
The number of ticks (<code className="px-1">10</code> minutes *{" "}
|
|
<code className="px-1">{value}</code> ={" "}
|
|
<strong className="px-1">{calculateTicks(value)}</strong>) it takes to {task}.
|
|
</p>
|
|
) : (
|
|
<p className="field-description">The number of ticks it takes to {task}.</p>
|
|
);
|
|
};
|
|
|
|
export default TickDurationDescription;
|