BaseLibraries/MattrixwvReactComponents
1
0
Fork 0
mirror of https://bitbucket.org/Mattrixwv/mattrixwvreactcomponents.git synced 2025-12-06 13:43:59 -05:00
Code Issues Packages Projects Releases Wiki Activity

Temporal input components added

Browse Source
This commit is contained in:
Mattrixwv
2025-07-31 22:23:00 -04:00
parent f6f77c9d42
commit e1b3000121
8 changed files with 118 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
lib/component/input/date/DateInput.tsx Normal file
View File

@@ -0,0 +1,26 @@
import type { DateInputProps } from "$/types/Input";
import clsx from "clsx";
import moment from "moment";
export default function DateInput({
id,
className,
defaultValue,
value,
onChange
}: DateInputProps){
return (
<input
type="date"
id={id}
className={clsx(
"border rounded-lg px-2 py-1",
className
)}
defaultValue={defaultValue ? moment(defaultValue).format("YYYY-MM-DD") : undefined}
value={value ? moment(value).format("YYYY-MM-DD") : undefined}
onChange={(e) => onChange?.(new Date(moment(e.target.value, "YYYY-MM-DD").toDate()))}
/>
);
}

26
lib/component/input/date/DateTimeInput.tsx Normal file
View File

@@ -0,0 +1,26 @@
import type { DateInputProps } from "$/types/Input";
import clsx from "clsx";
import moment from "moment";
export default function DateTimeInput({
id,
className,
defaultValue,
value,
onChange
}: DateInputProps){
return (
<input
type="datetime-local"
id={id}
className={clsx(
"border rounded-lg px-2 py-1 outline-none",
className
)}
defaultValue={defaultValue ? moment(defaultValue).format("YYYY-MM-DDTHH:mm") : undefined}
value={value ? moment(value).format("YYYY-MM-DDTHH:mm") : undefined}
onChange={(e) => onChange?.(new Date(moment(e.target.value, "YYYY-MM-DDTHH:mm").toDate()))}
/>
);
}

26
lib/component/input/date/TimeInput.tsx Normal file
View File

@@ -0,0 +1,26 @@
import type { DateInputProps } from "$/types/Input";
import clsx from "clsx";
import moment from "moment";
export default function TimeInput({
id,
className,
defaultValue,
value,
onChange
}: DateInputProps){
return (
<input
type="time"
id={id}
className={clsx(
"border rounded-lg px-2 py-1 outline-none",
className
)}
defaultValue={defaultValue ? moment(defaultValue).format("YYYY-MM-DDTHH:mm") : undefined}
value={value ? moment(value).format("YYYY-MM-DDTHH:mm") : undefined}
onChange={(e) => onChange?.(new Date(moment(e.target.value, "YYYY-MM-DDTHH:mm").toDate()))}
/>
);
}

9
lib/types/Input.d.ts vendored
View File

@@ -149,3 +149,12 @@ export interface RadioListProps {
direction?: "vertical" | "horizontal";
children?: React.ReactNode;
}
export interface DateInputProps {
id?: string;
className?: string;
defaultValue?: Date;
value?: Date;
onChange?: (newValue: Date) => void;
}

10
package-lock.json generated
View File

@@ -14,6 +14,7 @@
"@tanstack/react-router-devtools": "^1.124.0",
"@types/node": "^24.0.4",
"clsx": "^2.1.1",
"moment": "^2.30.1",
"react": "^19.1.0",
"react-dom": "^19.1.0",
"react-icons": "^5.5.0",
@@ -4773,6 +4774,15 @@
"pathe": "^2.0.1"
}
},
"node_modules/moment": {
"version": "2.30.1",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
"integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
"license": "MIT",
"engines": {
"node": "*"
}
},
"node_modules/ms": {
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",

1
package.json
View File

@@ -16,6 +16,7 @@
"@tanstack/react-router-devtools": "^1.124.0",
"@types/node": "^24.0.4",
"clsx": "^2.1.1",
"moment": "^2.30.1",
"react": "^19.1.0",
"react-dom": "^19.1.0",
"react-icons": "^5.5.0",

3
src/routes/input/index.tsx
View File

@@ -1,6 +1,6 @@
import { MattrixwvTabGroup } from "$/component/tab";
import type { TabGroupContent } from "$/types/Tab";
import { CheckboxContent, FileContent, RadioContent, SwitchContent, TextContent } from "@/util/InputUtils";
import { CheckboxContent, DateContent, FileContent, RadioContent, SwitchContent, TextContent } from "@/util/InputUtils";
import { createFileRoute } from "@tanstack/react-router";
@@ -13,6 +13,7 @@ function InputPage(){
const tabs: TabGroupContent[] = [
{ tab: "Checkbox", content: <CheckboxContent/>},
{ tab: "Radio", content: <RadioContent/> },
{ tab: "Date", content: <DateContent/> },
{ tab: "File", content: <FileContent/> },
{ tab: "Switch", content: <SwitchContent/> },
{ tab: "Text", content: <TextContent/> }

18
src/util/InputUtils.tsx
View File

@@ -11,6 +11,9 @@ import SecondaryCheckbox from "$/component/input/checkbox/SecondaryCheckbox";
import SuccessCheckbox from "$/component/input/checkbox/SuccessCheckbox";
import TertiaryCheckbox from "$/component/input/checkbox/TertiaryCheckbox";
import WarningCheckbox from "$/component/input/checkbox/WarningCheckbox";
import DateInput from "$/component/input/date/DateInput";
import DateTimeInput from "$/component/input/date/DateTimeInput";
import TimeInput from "$/component/input/date/TimeInput";
import DangerRadioButton from "$/component/input/radio/DangerRadioButton";
import DarkRadioButton from "$/component/input/radio/DarkRadioButton";
import InfoRadioButton from "$/component/input/radio/InfoRadioButton";
@@ -743,3 +746,18 @@ function RadioDisplay({
</div>
);
}
export function DateContent(){
return (
<div
className="flex flex-col items-center justify-center my-8 gap-y-8"
>
<DateInput
/>
<DateTimeInput
/>
<TimeInput
/>
</div>
);
}