From ba644a2c89b7b23d7e7bf164d3d83f802c3c4c79 Mon Sep 17 00:00:00 2001 From: Arvid Norlin Date: Fri, 31 May 2024 13:44:48 +0200 Subject: [PATCH] fix: use generic Select component in Date --- .../Form/Date/Select/index.tsx | 78 ------------------- .../Form/Date/Select/select.module.css | 54 ------------- .../Form/Date/Select/select.ts | 16 ---- components/TempDesignSystem/Form/Date/date.ts | 5 ++ .../TempDesignSystem/Form/Date/index.tsx | 37 +++++---- .../TempDesignSystem/Form/Select/select.ts | 2 +- 6 files changed, 29 insertions(+), 163 deletions(-) delete mode 100644 components/TempDesignSystem/Form/Date/Select/index.tsx delete mode 100644 components/TempDesignSystem/Form/Date/Select/select.module.css delete mode 100644 components/TempDesignSystem/Form/Date/Select/select.ts diff --git a/components/TempDesignSystem/Form/Date/Select/index.tsx b/components/TempDesignSystem/Form/Date/Select/index.tsx deleted file mode 100644 index f9c28e1d0..000000000 --- a/components/TempDesignSystem/Form/Date/Select/index.tsx +++ /dev/null @@ -1,78 +0,0 @@ -"use client" -import { useRef } from "react" -import { - Button, - type Key, - Label, - ListBox, - ListBoxItem, - Popover, - Select as ReactAriaSelect, - SelectValue, -} from "react-aria-components" - -import SelectChevron from "../../SelectChevron" - -import styles from "./select.module.css" - -import type { SelectProps } from "./select" - -export default function Select({ - "aria-label": ariaLabel, - items, - label, - name, - onSelect, - placeholder, - value, -}: SelectProps) { - const divRef = useRef(null) - - function handleOnSelect(key: Key) { - onSelect(key, name) - } - - return ( -
- - - - - - {items.map((item) => ( - - {item} - - ))} - - - -
- ) -} diff --git a/components/TempDesignSystem/Form/Date/Select/select.module.css b/components/TempDesignSystem/Form/Date/Select/select.module.css deleted file mode 100644 index bdcd08329..000000000 --- a/components/TempDesignSystem/Form/Date/Select/select.module.css +++ /dev/null @@ -1,54 +0,0 @@ -.date { - position: relative; -} - -.label { - font-family: var(--typography-Body-Regular-fontFamily); - font-size: 1.5rem; - font-weight: 400; -} - -.select { - display: flex; - flex-direction: column; - gap: 0.4rem; -} - -.input { - align-items: center; - background-color: var(--some-white-color, #fff); - border: var(--border); - border-radius: var(--radius); - color: var(--some-black-color, #757575); - display: grid; - font-family: var(--typography-Body-Regular-fontFamily); - font-size: 1.6rem; - font-weight: 400; - gap: 1rem; - grid-template-columns: 1fr auto; - height: 4rem; - letter-spacing: -1.5%; - line-height: 2.4rem; - padding: 0.8rem 1rem 0.8rem 1.6rem; -} - -.popover { - background-color: var(--some-white-color, #fff); - border: var(--border); - border-radius: var(--radius); - overflow: auto; - width: 100%; -} - -.listBox { - padding: 1.6rem 1.6rem 1.6rem 0.8rem; -} - -.listBoxItem { - padding: 0 0.8rem; -} - -.listBoxItem[data-selected="true"], -.listBoxItem[data-focused="true"] { - background-color: rgba(75, 75, 75, 0.2); -} diff --git a/components/TempDesignSystem/Form/Date/Select/select.ts b/components/TempDesignSystem/Form/Date/Select/select.ts deleted file mode 100644 index 8378106f3..000000000 --- a/components/TempDesignSystem/Form/Date/Select/select.ts +++ /dev/null @@ -1,16 +0,0 @@ -import type { Key } from "react-aria-components" - -export const enum DateName { - date = "date", - month = "month", - year = "year", -} - -export interface SelectProps - extends Omit, "onSelect"> { - items: number[] - label: string - name: DateName - onSelect: (key: Key, name: DateName) => void - placeholder?: string -} diff --git a/components/TempDesignSystem/Form/Date/date.ts b/components/TempDesignSystem/Form/Date/date.ts index 6e2d3d027..22c13e160 100644 --- a/components/TempDesignSystem/Form/Date/date.ts +++ b/components/TempDesignSystem/Form/Date/date.ts @@ -2,6 +2,11 @@ import type { Control, RegisterOptions } from "react-hook-form" import type { EditProfileSchema } from "@/components/MyProfile/Profile/Edit/Form/schema" +export const enum DateName { + date = "date", + month = "month", + year = "year", +} export interface DateProps extends React.SelectHTMLAttributes { control: Control diff --git a/components/TempDesignSystem/Form/Date/index.tsx b/components/TempDesignSystem/Form/Date/index.tsx index 368a003b5..f4cbd5912 100644 --- a/components/TempDesignSystem/Form/Date/index.tsx +++ b/components/TempDesignSystem/Form/Date/index.tsx @@ -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} /> diff --git a/components/TempDesignSystem/Form/Select/select.ts b/components/TempDesignSystem/Form/Select/select.ts index e29fef48f..4f5802542 100644 --- a/components/TempDesignSystem/Form/Select/select.ts +++ b/components/TempDesignSystem/Form/Select/select.ts @@ -7,5 +7,5 @@ export interface SelectProps name: string onSelect: (key: Key) => void placeholder?: string - defaultSelectedKey: Key + defaultSelectedKey?: Key }