scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: use generic Select component in Date

Browse Source
This commit is contained in:
Arvid Norlin
2024-05-31 13:44:48 +02:00
parent e649a842c6
commit ba644a2c89
6 changed files with 29 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
components/TempDesignSystem/Form/Date/index.tsx
View File

@@ -13,8 +13,8 @@ import { _ } from "@/lib/translation"
import { rangeArray } from "@/utils/rangeArray"
import { DateName } from "./Select/select"
import Select from "./Select"
import Select from "../Select"
import { DateName } from "./date"
import styles from "./date.module.css"
@@ -36,19 +36,26 @@ export default function DateSelect({
rules: registerOptions,
})
const currentYear = new Date().getFullYear()
const months = rangeArray(1, 12)
const years = rangeArray(1900, currentYear).reverse()
const months = rangeArray(1, 12).map((month) => ({
value: month,
label: `${month}`,
}))
const years = rangeArray(1900, currentYear)
.reverse()
.map((year) => ({ value: year, label: `${year}` }))
function handleOnSelect(select: Key, selector: DateName) {
function createOnSelect(selector: DateName) {
/**
* Months are 0 index based and therefore we
* must subtract by 1 to get the selected month
*/
if (selector === DateName.month) {
select = Number(select) - 1
return (select: Key) => {
if (selector === DateName.month) {
select = Number(select) - 1
}
const newDate = dt(d).set(selector, Number(select))
setValue(name, newDate.format("YYYY-MM-DD"))
}
const newDate = dt(d).set(selector, Number(select))
setValue(name, newDate.format("YYYY-MM-DD"))
}
return (
@@ -67,10 +74,12 @@ export default function DateSelect({
case "day":
let days = []
if (segment.maxValue && segment.minValue) {
days = rangeArray(segment.minValue, segment.maxValue)
days = rangeArray(segment.minValue, segment.maxValue).map(
(day) => ({ value: day, label: `${day}` })
)
} else {
days = Array.from(Array(segment.maxValue).keys()).map(
(i) => i + 1
(i) => ({ value: i + 1, label: `${i + 1}` })
)
}
return (
@@ -80,7 +89,7 @@ export default function DateSelect({
items={days}
label={_("Day")}
name={DateName.date}
onSelect={handleOnSelect}
onSelect={createOnSelect(DateName.date)}
placeholder={_("DD")}
value={segment.value}
/>
@@ -94,7 +103,7 @@ export default function DateSelect({
items={months}
label={_("Month")}
name={DateName.month}
onSelect={handleOnSelect}
onSelect={createOnSelect(DateName.month)}
placeholder={_("MM")}
value={segment.value}
/>
@@ -108,7 +117,7 @@ export default function DateSelect({
items={years}
label={_("Year")}
name={DateName.year}
onSelect={handleOnSelect}
onSelect={createOnSelect(DateName.year)}
placeholder={_("YYYY")}
value={segment.value}
/>