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

feat(web/input): multi-select row

Browse Source
This commit is contained in:
Luke
2023-01-15 11:54:15 +01:00
parent 8c4d770e46
commit 779ed8dd07
3 changed files with 45 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -73,7 +73,7 @@ const InputDialog: React.FC = () => {
} || { value: null }
);
// Backwards compat with new Select data type
if (row.type === 'select') {
if (row.type === 'select' || row.type === 'multi-select') {
row.options = row.options.map((option) =>
!option.label ? { ...option, label: option.value } : option
) as Array<OptionValue>;
@@ -140,7 +140,9 @@ const InputDialog: React.FC = () => {
index={index}
/>
)}
{row.type === 'select' && <SelectField row={row} index={index} control={form.control} />}
{(row.type === 'select' || row.type === 'multi-select') && (
<SelectField row={row} index={index} control={form.control} />
)}
{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} />}

55
web/src/features/dialog/components/fields/select.tsx
View File

@@ -1,4 +1,4 @@
import { Select } from '@mantine/core';
import { MultiSelect, Select } from '@mantine/core';
import { ISelect } from '../../../../interfaces/dialog';
import { Control, FieldValues, useController, UseFormRegisterReturn, UseFormSetValue } from 'react-hook-form';
import { FormValues } from '../../InputDialog';
@@ -14,25 +14,48 @@ const SelectField: React.FC<Props> = (props) => {
const controller = useController({
name: `test.${props.index}.value`,
control: props.control,
defaultValue: props.row.default || props.row.options[0].value,
defaultValue: props.row.default || props.row.type !== 'multi-select' ? props.row.options[0].value : undefined,
rules: { required: props.row.required },
});
return (
<Select
data={props.row.options}
value={controller.field.value}
name={controller.field.name}
ref={controller.field.ref}
onBlur={controller.field.onBlur}
onChange={controller.field.onChange}
disabled={props.row.disabled}
label={props.row.label}
description={props.row.description}
withAsterisk={props.row.required}
clearable={props.row.clearable}
icon={props.row.icon && <FontAwesomeIcon icon={props.row.icon} fixedWidth />}
/>
<>
{props.row.type === 'select' ? (
<Select
data={props.row.options}
value={controller.field.value}
name={controller.field.name}
ref={controller.field.ref}
onBlur={controller.field.onBlur}
onChange={controller.field.onChange}
disabled={props.row.disabled}
label={props.row.label}
description={props.row.description}
withAsterisk={props.row.required}
clearable={props.row.clearable}
icon={props.row.icon && <FontAwesomeIcon icon={props.row.icon} fixedWidth />}
/>
) : (
<>
{props.row.type === 'multi-select' && (
<MultiSelect
data={props.row.options}
value={controller.field.value}
name={controller.field.name}
ref={controller.field.ref}
onBlur={controller.field.onBlur}
onChange={controller.field.onChange}
disabled={props.row.disabled}
label={props.row.label}
description={props.row.description}
withAsterisk={props.row.required}
clearable={props.row.clearable}
icon={props.row.icon && <FontAwesomeIcon icon={props.row.icon} fixedWidth />}
/>
)}
</>
)}
</>
);
};

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

@@ -23,9 +23,9 @@ export interface ICheckbox {
export type OptionValue = { value: string; label?: string };
export interface ISelect {
type: 'select';
type: 'select' | 'multi-select';
label: string;
default?: string;
default?: string | string[];
options: Array<OptionValue>;
disabled?: boolean;
description?: string;