FumeNodes/ox_lib
1
0
Fork 0
mirror of https://github.com/CommunityOx/ox_lib.git synced 2026-08-17 15:06:02 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(web/input): time input field (#206)

Browse Source 
* feat(web/input): time input
This commit is contained in:
masonschafercodes
2023-01-31 12:41:42 -05:00
committed by GitHub
parent ada2a35c0b
commit 8a7e0f89d2
4 changed files with 33 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
web/src/features/dev/debug/input.ts
View File

@@ -14,6 +14,12 @@ export const debugInput = () => {
placeholder: '420',
description: 'Description that tells you what this input field does',
},
{
type: 'time',
format: '12',
label: 'Locker Time',
description: 'Description that tells you what this input field does',
},
{ type: 'checkbox', label: 'Some checkbox' },
{ type: 'input', label: 'Locker PIN', password: true, icon: 'lock' },
{ type: 'checkbox', label: 'Some other checkbox', checked: true },

4
web/src/features/dialog/InputDialog.tsx
View File

@@ -61,7 +61,7 @@ const InputDialog: React.FC = () => {
{
value:
row.type !== 'checkbox'
? row.type === 'date' || row.type === 'date-range'
? row.type === 'date' || row.type === 'date-range' || row.type === 'time'
? // Set date to current one if default is set to true
row.default === true
? new Date().getTime()
@@ -146,7 +146,7 @@ const InputDialog: React.FC = () => {
{row.type === 'number' && <NumberField control={form.control} row={row} index={index} />}
{row.type === 'slider' && <SliderField control={form.control} row={row} index={index} />}
{row.type === 'color' && <ColorField control={form.control} row={row} index={index} />}
{row.type === 'date' || row.type === 'date-range' ? (
{row.type === 'date' || row.type === 'date-range' || row.type === 'time' ? (
<DateField control={form.control} row={row} index={index} />
) : null}
{row.type === 'textarea' && (

29
web/src/features/dialog/components/fields/date.tsx
View File

@@ -1,7 +1,7 @@
import { IDateInput } from '../../../../interfaces/dialog';
import { Control, useController } from 'react-hook-form';
import { FormValues } from '../../InputDialog';
import { DatePicker, DateRangePicker } from '@mantine/dates';
import { DatePicker, DateRangePicker, TimeInput } from '@mantine/dates';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
interface Props {
@@ -19,7 +19,7 @@ const DateField: React.FC<Props> = (props) => {
return (
<>
{props.row.type === 'date' ? (
{props.row.type === 'date' && (
<DatePicker
value={controller.field.value ? new Date(controller.field.value) : controller.field.value}
name={controller.field.name}
@@ -38,8 +38,8 @@ const DateField: React.FC<Props> = (props) => {
minDate={props.row.min ? new Date(props.row.min) : undefined}
maxDate={props.row.max ? new Date(props.row.max) : undefined}
/>
) : (
props.row.type === 'date-range' && (
)}
{props.row.type === 'date-range' && (
<DateRangePicker
value={
controller.field.value
@@ -65,8 +65,25 @@ const DateField: React.FC<Props> = (props) => {
minDate={props.row.min ? new Date(props.row.min) : undefined}
maxDate={props.row.max ? new Date(props.row.max) : undefined}
/>
)
)}
)}
{props.row.type === 'time' && (
<TimeInput
value={controller.field.value ? new Date(controller.field.value) : controller.field.value}
name={controller.field.name}
ref={controller.field.ref}
onBlur={controller.field.onBlur}
onChange={(date) => controller.field.onChange(date ? date.getTime() : null)}
label={props.row.label}
description={props.row.description}
placeholder={props.row.placeholder}
disabled={props.row.disabled}
format={props.row.format || "12"}
withAsterisk={props.row.required}
clearable={props.row.clearable}
icon={props.row.icon && <FontAwesomeIcon fixedWidth icon={props.row.icon} />}
/>
)}
</>
);
};

3
web/src/interfaces/dialog.ts
View File

@@ -70,11 +70,12 @@ export interface IColorInput {
}
export interface IDateInput {
type: 'date' | 'date-range';
type: 'date' | 'date-range' | 'time';
label: string;
default?: string | [string, string] | true;
disabled?: boolean;
description?: string;
format?: '12' | '24' | undefined;
required?: boolean;
placeholder?: string;
clearable?: boolean;