FumeNodes/ox_lib
1
0
Fork 0
mirror of https://github.com/CommunityOx/ox_lib.git synced 2026-08-16 22:46:03 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(web/input): date input

Browse Source
This commit is contained in:
Luke
2023-01-13 19:09:07 +01:00
parent 2a1429848c
commit d621aca29f
5 changed files with 103 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
web/package.json
View File

@@ -10,9 +10,9 @@
"@fortawesome/free-regular-svg-icons": "^6.1.1",
"@fortawesome/free-solid-svg-icons": "^6.1.1",
"@fortawesome/react-fontawesome": "^0.1.18",
"@mantine/core": "^5.9.4",
"@mantine/dates": "^5.9.4",
"@mantine/hooks": "^5.9.4",
"@mantine/core": "^5.10.0",
"@mantine/dates": "^5.10.0",
"@mantine/hooks": "^5.10.0",
"@testing-library/jest-dom": "^5.16.3",
"@testing-library/react": "^12.1.4",
"@testing-library/user-event": "^13.5.0",

51
web/pnpm-lock.yaml generated
View File

@@ -15,9 +15,9 @@ specifiers:
'@fortawesome/free-regular-svg-icons': ^6.1.1
'@fortawesome/free-solid-svg-icons': ^6.1.1
'@fortawesome/react-fontawesome': ^0.1.18
'@mantine/core': ^5.9.4
'@mantine/dates': ^5.9.4
'@mantine/hooks': ^5.9.4
'@mantine/core': ^5.10.0
'@mantine/dates': ^5.10.0
'@mantine/hooks': ^5.10.0
'@testing-library/dom': ^8.11.4
'@testing-library/jest-dom': ^5.16.3
'@testing-library/react': ^12.1.4
@@ -53,9 +53,9 @@ dependencies:
'@fortawesome/free-regular-svg-icons': 6.1.1
'@fortawesome/free-solid-svg-icons': 6.1.1
'@fortawesome/react-fontawesome': 0.1.18_sdfg7szeivrzzj63kiqxwaxkwu
'@mantine/core': 5.9.4_hhuapac6geeisg3mk6qmy7wn7a
'@mantine/dates': 5.9.4_qna4mfjln7nd2ikoxaebjem64u
'@mantine/hooks': 5.9.4_react@18.2.0
'@mantine/core': 5.10.0_65dpizmw55g2haz7gbt6rfdsuq
'@mantine/dates': 5.10.0_afutlozjtr4cmm2smwl7mxxxdy
'@mantine/hooks': 5.10.0_react@18.2.0
'@testing-library/jest-dom': 5.16.3
'@testing-library/react': 12.1.4_biqbaboplfbrettd7655fr4n2y
'@testing-library/user-event': 13.5.0_tejv2mq25i2itkdftmp7m2s2de
@@ -737,6 +737,7 @@ packages:
/@floating-ui/react-dom-interactions/0.10.3_biqbaboplfbrettd7655fr4n2y:
resolution: {integrity: sha512-UEHqdnzyoiWNU5az/tAljr9iXFzN18DcvpMqW+/cXz4FEhDEB1ogLtWldOWCujLerPBnSRocADALafelOReMpw==}
deprecated: Package renamed to @floating-ui/react
peerDependencies:
react: '>=16.8.0'
react-dom: '>=16.8.0'
@@ -852,17 +853,17 @@ packages:
'@jridgewell/resolve-uri': 3.0.5
'@jridgewell/sourcemap-codec': 1.4.11
/@mantine/core/5.9.4_hhuapac6geeisg3mk6qmy7wn7a:
resolution: {integrity: sha512-lUiRk9nHoK/lelAdyirt/MJh6ACHyV9OizYWUG4YjjZhYfGaKQQuZ7b8I/bCV3MMQmhjp02ujBPTEFHH7dzQkw==}
/@mantine/core/5.10.0_65dpizmw55g2haz7gbt6rfdsuq:
resolution: {integrity: sha512-if272RiYPK0nQQdGNwcCSY7bCPJW9455qXlRhnYOr021xh89T8WFVPeDw4uwcxoXsXdKRV5GAi9irSnsUqsjJQ==}
peerDependencies:
'@mantine/hooks': 5.9.4
'@mantine/hooks': 5.10.0
react: '>=16.8.0'
react-dom: '>=16.8.0'
dependencies:
'@floating-ui/react-dom-interactions': 0.10.3_biqbaboplfbrettd7655fr4n2y
'@mantine/hooks': 5.9.4_react@18.2.0
'@mantine/styles': 5.9.4_sogmqz4enknxtkxk3k5s6bqwnq
'@mantine/utils': 5.9.4_react@18.2.0
'@mantine/hooks': 5.10.0_react@18.2.0
'@mantine/styles': 5.10.0_sogmqz4enknxtkxk3k5s6bqwnq
'@mantine/utils': 5.10.0_react@18.2.0
'@radix-ui/react-scroll-area': 1.0.2_biqbaboplfbrettd7655fr4n2y
react: 18.2.0
react-dom: 18.2.0_react@18.2.0
@@ -872,31 +873,31 @@ packages:
- '@types/react'
dev: false
/@mantine/dates/5.9.4_qna4mfjln7nd2ikoxaebjem64u:
resolution: {integrity: sha512-JgOQnc2cblzxsKl3m/Ygv1vIE49ObtioQTgRiAd8GXlZH0Urb81NYKiJoKHV5uJvLIIBkAYWVTs7PKc73dXs+Q==}
/@mantine/dates/5.10.0_afutlozjtr4cmm2smwl7mxxxdy:
resolution: {integrity: sha512-gK+BiXaTY9X1ESjRPNI7CASYx/QseDolNUJBqvXw6YB19QQ/PFCnyoj3xGiJUqiYfzKbFDKfTVSkP5cR6SHljA==}
peerDependencies:
'@mantine/core': 5.9.4
'@mantine/hooks': 5.9.4
'@mantine/core': 5.10.0
'@mantine/hooks': 5.10.0
dayjs: '>=1.0.0'
react: '>=16.8.0'
dependencies:
'@mantine/core': 5.9.4_hhuapac6geeisg3mk6qmy7wn7a
'@mantine/hooks': 5.9.4_react@18.2.0
'@mantine/utils': 5.9.4_react@18.2.0
'@mantine/core': 5.10.0_65dpizmw55g2haz7gbt6rfdsuq
'@mantine/hooks': 5.10.0_react@18.2.0
'@mantine/utils': 5.10.0_react@18.2.0
dayjs: 1.11.7
react: 18.2.0
dev: false
/@mantine/hooks/5.9.4_react@18.2.0:
resolution: {integrity: sha512-W6RR6fLKh0gPnIA+HLnJ3NRbgnlhbjsajug+Fhhs+CE6z1528ROI63OZ9s5NIAUj/aATkEyJA64P/V/yXYZ69A==}
/@mantine/hooks/5.10.0_react@18.2.0:
resolution: {integrity: sha512-dAefxpvqjFtXNeKse+awkIa4U1XGnMMOqWg1+07Y2Ino2G6EiT8AEnYqQyTXgcPoNaWwG9533Q/DDadmyweqaQ==}
peerDependencies:
react: '>=16.8.0'
dependencies:
react: 18.2.0
dev: false
/@mantine/styles/5.9.4_sogmqz4enknxtkxk3k5s6bqwnq:
resolution: {integrity: sha512-tgmRNgIMBiXIjnCkNh9l88J+ZgRGlAFQ20DwXIHygZ+hNX8z2Bg7I99xyZYdN4O3Km41CWqDUKxj/im7hT7D1Q==}
/@mantine/styles/5.10.0_sogmqz4enknxtkxk3k5s6bqwnq:
resolution: {integrity: sha512-3JBM5LWJHb4Yk7jymPiSuaBJRoe2CgA7KoyYWgabwBP115GlHPb1rQCcavJsobHV4U+wFfZEEUnVBpaAaXqgmw==}
peerDependencies:
'@emotion/react': '>=11.9.0'
react: '>=16.8.0'
@@ -909,8 +910,8 @@ packages:
react-dom: 18.2.0_react@18.2.0
dev: false
/@mantine/utils/5.9.4_react@18.2.0:
resolution: {integrity: sha512-NZAn30jjF52X+MFnkO3oaVgo2LPx3o/QxYlcuMkRBUTZALEXvQgrD0OyGDRgEXnfMdmkBP6rk3Pol6yXXEwU6w==}
/@mantine/utils/5.10.0_react@18.2.0:
resolution: {integrity: sha512-mHnNm0ajIa8qLAIEwv82N6+7YKecynOA3I8vzgBHXS2x4HwGsHITFYGmMh2LNpx5dRL034tObfEFYZXqncyEDw==}
peerDependencies:
react: '>=16.8.0'
dependencies:

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

@@ -1,9 +1,18 @@
import { Group, Modal, Button, Stack, SelectItem } from '@mantine/core';
import React, { FormEvent, useRef } from 'react';
import { Group, Modal, Button, Stack } from '@mantine/core';
import React from 'react';
import { useNuiEvent } from '../../hooks/useNuiEvent';
import { useLocales } from '../../providers/LocaleProvider';
import { fetchNui } from '../../utils/fetchNui';
import { IInput, ICheckbox, ISelect, INumber, ISlider, IColorInput, OptionValue } from '../../interfaces/dialog';
import {
IInput,
ICheckbox,
ISelect,
INumber,
ISlider,
IColorInput,
OptionValue,
IDateInput,
} from '../../interfaces/dialog';
import InputField from './components/fields/input';
import CheckboxField from './components/fields/checkbox';
import SelectField from './components/fields/select';
@@ -11,10 +20,11 @@ import NumberField from './components/fields/number';
import SliderField from './components/fields/slider';
import { useFieldArray, useForm } from 'react-hook-form';
import ColorField from './components/fields/color';
import DateField from './components/fields/date';
export interface InputProps {
heading: string;
rows: Array<IInput | ICheckbox | ISelect | INumber | ISlider | IColorInput>;
rows: Array<IInput | ICheckbox | ISelect | INumber | ISlider | IColorInput | IDateInput>;
options?: {
allowCancel?: boolean;
};
@@ -44,7 +54,17 @@ const InputDialog: React.FC = () => {
setFields(data);
setVisible(true);
data.rows.forEach((row, index) => {
fieldForm.insert(index, { value: row.type !== 'checkbox' ? row.default : row.checked } || { value: null });
fieldForm.insert(
index,
{
value:
row.type !== 'checkbox'
? row.type === 'date' && row.default
? new Date(row.default)
: row.default
: row.checked,
} || { value: null }
);
// Backwards compat with new Select data type
if (row.type === 'select') {
row.options = row.options.map((option) =>
@@ -117,6 +137,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' && <DateField control={form.control} row={row} index={index} />}
</React.Fragment>
);
})}

38
web/src/features/dialog/components/fields/date.tsx Normal file
View File

@@ -0,0 +1,38 @@
import { IDateInput } from '../../../../interfaces/dialog';
import { Control, useController } from 'react-hook-form';
import { FormValues } from '../../InputDialog';
import { DatePicker } from '@mantine/dates';
interface Props {
row: IDateInput;
index: number;
control: Control<FormValues>;
}
const DateField: React.FC<Props> = (props) => {
const controller = useController({
name: `test.${props.index}.value`,
control: props.control,
defaultValue: props.row.default && new Date(props.row.default),
rules: { required: props.row.required },
});
return (
<DatePicker
value={controller.field.value}
name={controller.field.name}
ref={controller.field.ref}
onBlur={controller.field.onBlur}
onChange={controller.field.onChange}
label={props.row.label}
description={props.row.description}
placeholder={props.row.placeholder}
disabled={props.row.disabled}
inputFormat="DD/MM/YYYY"
withAsterisk={props.row.required}
clearable={props.row.clearable}
/>
);
};
export default DateField;

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

@@ -67,3 +67,13 @@ export interface IColorInput {
format?: 'hex' | 'hexa' | 'rgb' | 'rgba' | 'hsl' | 'hsla';
required?: boolean;
}
export interface IDateInput {
type: 'date';
label: string;
default?: string;
disabled?: boolean;
description?: string;
required?: boolean;
placeholder?: string;
}