mirror of
https://github.com/CommunityOx/ox_lib.git
synced 2026-08-18 15:36:02 +01:00
refactor(web/input): select backwards compat with no label
This commit is contained in:
@@ -1,9 +1,9 @@
|
|||||||
import { Group, Modal, Button, Stack } from '@mantine/core';
|
import { Group, Modal, Button, Stack, SelectItem } from '@mantine/core';
|
||||||
import React, { FormEvent, useRef } from 'react';
|
import React, { FormEvent, useRef } from 'react';
|
||||||
import { useNuiEvent } from '../../hooks/useNuiEvent';
|
import { useNuiEvent } from '../../hooks/useNuiEvent';
|
||||||
import { useLocales } from '../../providers/LocaleProvider';
|
import { useLocales } from '../../providers/LocaleProvider';
|
||||||
import { fetchNui } from '../../utils/fetchNui';
|
import { fetchNui } from '../../utils/fetchNui';
|
||||||
import { IInput, ICheckbox, ISelect, INumber, ISlider, IColorInput } from '../../interfaces/dialog';
|
import { IInput, ICheckbox, ISelect, INumber, ISlider, IColorInput, OptionValue } from '../../interfaces/dialog';
|
||||||
import InputField from './components/fields/input';
|
import InputField from './components/fields/input';
|
||||||
import CheckboxField from './components/fields/checkbox';
|
import CheckboxField from './components/fields/checkbox';
|
||||||
import SelectField from './components/fields/select';
|
import SelectField from './components/fields/select';
|
||||||
@@ -42,6 +42,12 @@ const InputDialog: React.FC = () => {
|
|||||||
setVisible(true);
|
setVisible(true);
|
||||||
data.rows.forEach((row, index) => {
|
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.default : row.checked } || { value: null });
|
||||||
|
// Backwards compat with new Select data type
|
||||||
|
if (row.type === 'select') {
|
||||||
|
row.options = row.options.map((option) =>
|
||||||
|
!option.label ? { ...option, label: option.value } : option
|
||||||
|
) as Array<OptionValue>;
|
||||||
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -9,7 +9,6 @@ interface Props {
|
|||||||
control: Control<FormValues>;
|
control: Control<FormValues>;
|
||||||
}
|
}
|
||||||
|
|
||||||
// TODO: set label to value of value when there is no label provided
|
|
||||||
const SelectField: React.FC<Props> = (props) => {
|
const SelectField: React.FC<Props> = (props) => {
|
||||||
const controller = useController({
|
const controller = useController({
|
||||||
name: `test.${props.index}.value`,
|
name: `test.${props.index}.value`,
|
||||||
|
|||||||
@@ -22,11 +22,12 @@ export interface ICheckbox {
|
|||||||
required?: boolean;
|
required?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export type OptionValue = { value: string; label?: string };
|
||||||
export interface ISelect {
|
export interface ISelect {
|
||||||
type: 'select';
|
type: 'select';
|
||||||
label: string;
|
label: string;
|
||||||
default?: string;
|
default?: string;
|
||||||
options: Array<SelectItem>;
|
options: Array<OptionValue>;
|
||||||
disabled?: boolean;
|
disabled?: boolean;
|
||||||
description?: string;
|
description?: string;
|
||||||
required?: boolean;
|
required?: boolean;
|
||||||
|
|||||||
Reference in New Issue
Block a user