diff --git a/web/package.json b/web/package.json index 233cce4..029d61a 100644 --- a/web/package.json +++ b/web/package.json @@ -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", diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml index 3f63d7b..3b7c137 100644 --- a/web/pnpm-lock.yaml +++ b/web/pnpm-lock.yaml @@ -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: diff --git a/web/src/features/dialog/InputDialog.tsx b/web/src/features/dialog/InputDialog.tsx index ae3a000..954e0b5 100644 --- a/web/src/features/dialog/InputDialog.tsx +++ b/web/src/features/dialog/InputDialog.tsx @@ -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; + rows: Array; 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' && } {row.type === 'slider' && } {row.type === 'color' && } + {row.type === 'date' && } ); })} diff --git a/web/src/features/dialog/components/fields/date.tsx b/web/src/features/dialog/components/fields/date.tsx new file mode 100644 index 0000000..f015100 --- /dev/null +++ b/web/src/features/dialog/components/fields/date.tsx @@ -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; +} + +const DateField: React.FC = (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 ( + + ); +}; + +export default DateField; diff --git a/web/src/interfaces/dialog.ts b/web/src/interfaces/dialog.ts index 7ed93a6..1348054 100644 --- a/web/src/interfaces/dialog.ts +++ b/web/src/interfaces/dialog.ts @@ -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; +}