fix(site): fix floating number on duration fields #13209
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| import type { Meta, StoryObj } from "@storybook/react"; | ||
| import { useState } from "react"; | ||
| import { DurationField } from "./DurationField"; | ||
|
|
||
| const meta: Meta<typeof DurationField> = { | ||
| title: "components/DurationField", | ||
| component: DurationField, | ||
| args: { | ||
| label: "Duration", | ||
| }, | ||
| render: function RenderComponent(args) { | ||
| const [value, setValue] = useState<number>(args.value); | ||
| return ( | ||
| <DurationField | ||
| {...args} | ||
| value={value} | ||
| onChange={(value) => setValue(value)} | ||
| /> | ||
| ); | ||
| }, | ||
| }; | ||
|
|
||
| export default meta; | ||
| type Story = StoryObj<typeof DurationField>; | ||
|
|
||
| export const Hours: Story = { | ||
| args: { | ||
| value: hoursToMs(16), | ||
| }, | ||
| }; | ||
|
|
||
| export const Days: Story = { | ||
| args: { | ||
| value: daysToMs(2), | ||
| }, | ||
| }; | ||
|
|
||
| function hoursToMs(hours: number): number { | ||
| return hours * 60 * 60 * 1000; | ||
| } | ||
|
|
||
| function daysToMs(days: number): number { | ||
| return days * 24 * 60 * 60 * 1000; | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,152 @@ | ||
| import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown"; | ||
| import FormHelperText from "@mui/material/FormHelperText"; | ||
| import MenuItem from "@mui/material/MenuItem"; | ||
| import Select from "@mui/material/Select"; | ||
| import TextField, { type TextFieldProps } from "@mui/material/TextField"; | ||
| import { useState, type FC, useEffect } from "react"; | ||
| import { | ||
| type TimeUnit, | ||
| durationInDays, | ||
| durationInHours, | ||
| suggestedTimeUnit, | ||
| } from "utils/time"; | ||
|
|
||
| type DurationFieldProps = Omit<TextFieldProps, "value" | "onChange"> & { | ||
| // Value is in ms | ||
| value: number; | ||
BrunoQuaresma marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| onChange: (value: number) => void; | ||
| }; | ||
|
|
||
| type State = { | ||
| unit: TimeUnit; | ||
| // Handling empty values as strings in the input simplifies the process, | ||
| // especially when a user clears the input field. | ||
| durationFieldValue: string; | ||
| }; | ||
|
|
||
| export const DurationField: FC<DurationFieldProps> = (props) => { | ||
| const { value: parentValue, onChange, helperText, ...textFieldProps } = props; | ||
| const [state, setState] = useState<State>(() => initState(parentValue)); | ||
BrunoQuaresma marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| const currentDurationInMs = durationInMs( | ||
| state.durationFieldValue, | ||
| state.unit, | ||
| ); | ||
|
|
||
| useEffect(() => { | ||
| if (parentValue !== currentDurationInMs) { | ||
| setState(initState(parentValue)); | ||
| } | ||
| }, [currentDurationInMs, parentValue]); | ||
|
|
||
| return ( | ||
| <div> | ||
| <div | ||
| css={{ | ||
| display: "flex", | ||
| gap: 8, | ||
| }} | ||
| > | ||
| <TextField | ||
| {...textFieldProps} | ||
| type="number" | ||
| css={{ maxWidth: 160 }} | ||
| value={state.durationFieldValue} | ||
| onChange={(e) => { | ||
| const durationFieldValue = e.currentTarget.value; | ||
|
|
||
| setState((state) => ({ | ||
| ...state, | ||
| durationFieldValue, | ||
| })); | ||
|
|
||
| const newDurationInMs = durationInMs( | ||
| durationFieldValue, | ||
| state.unit, | ||
| ); | ||
| if (newDurationInMs !== parentValue) { | ||
| onChange(newDurationInMs); | ||
| } | ||
| }} | ||
| inputProps={{ | ||
| step: 1, | ||
| }} | ||
BrunoQuaresma marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| /> | ||
| <Select | ||
| disabled={props.disabled} | ||
| css={{ width: 120, "& .MuiSelect-icon": { padding: 2 } }} | ||
| value={state.unit} | ||
| onChange={(e) => { | ||
| const unit = e.target.value as TimeUnit; | ||
| setState(() => ({ | ||
| unit, | ||
| durationFieldValue: | ||
| unit === "hours" | ||
| ? durationInHours(currentDurationInMs).toString() | ||
| : durationInDays(currentDurationInMs).toString(), | ||
| })); | ||
| }} | ||
| inputProps={{ "aria-label": "Time unit" }} | ||
| IconComponent={KeyboardArrowDown} | ||
| > | ||
| <MenuItem | ||
| value="hours" | ||
| disabled={!canConvertDurationToHours(currentDurationInMs)} | ||
| > | ||
| Hours | ||
| </MenuItem> | ||
| <MenuItem | ||
| value="days" | ||
| disabled={!canConvertDurationToDays(currentDurationInMs)} | ||
| > | ||
| Days | ||
| </MenuItem> | ||
| </Select> | ||
| </div> | ||
|
|
||
| {helperText && ( | ||
| <FormHelperText error={props.error}>{helperText}</FormHelperText> | ||
|
There was a problem hiding this comment. Was there a reason why There was a problem hiding this comment. Because it is used by the TextField props as well. |
||
| )} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| function initState(value: number): State { | ||
| const unit = suggestedTimeUnit(value); | ||
| const durationFieldValue = | ||
| unit === "hours" | ||
| ? durationInHours(value).toString() | ||
| : durationInDays(value).toString(); | ||
|
|
||
| return { | ||
| unit, | ||
| durationFieldValue, | ||
| }; | ||
| } | ||
|
|
||
| function durationInMs(durationFieldValue: string, unit: TimeUnit): number { | ||
| const durationInMs = parseInt(durationFieldValue); | ||
BrunoQuaresma marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
|
||
| if (Number.isNaN(durationInMs)) { | ||
| return 0; | ||
| } | ||
|
|
||
| return unit === "hours" | ||
| ? hoursToDuration(durationInMs) | ||
| : daysToDuration(durationInMs); | ||
| } | ||
|
|
||
| function hoursToDuration(hours: number): number { | ||
| return hours * 60 * 60 * 1000; | ||
| } | ||
|
|
||
| function daysToDuration(days: number): number { | ||
| return days * 24 * hoursToDuration(1); | ||
| } | ||
|
|
||
| function canConvertDurationToDays(duration: number): boolean { | ||
| return Number.isInteger(durationInDays(duration)); | ||
| } | ||
|
|
||
| function canConvertDurationToHours(duration: number): boolean { | ||
| return Number.isInteger(durationInHours(duration)); | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| export type TimeUnit = "days" | "hours"; | ||
|
|
||
| export function humanDuration(durationInMs: number) { | ||
| if (durationInMs === 0) { | ||
| return "0 hours"; | ||
BrunoQuaresma marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| } | ||
|
|
||
| const timeUnit = suggestedTimeUnit(durationInMs); | ||
| const durationValue = | ||
| timeUnit === "days" | ||
| ? durationInDays(durationInMs) | ||
| : durationInHours(durationInMs); | ||
|
|
||
| return `${durationValue} ${timeUnit}`; | ||
| } | ||
|
|
||
| export function suggestedTimeUnit(duration: number): TimeUnit { | ||
| if (duration === 0) { | ||
| return "hours"; | ||
| } | ||
|
|
||
| return Number.isInteger(durationInDays(duration)) ? "days" : "hours"; | ||
| } | ||
|
|
||
| export function durationInHours(duration: number): number { | ||
| return duration / 1000 / 60 / 60; | ||
| } | ||
|
|
||
| export function durationInDays(duration: number): number { | ||
| return duration / 1000 / 60 / 60 / 24; | ||
| } | ||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.