FumeNodes/ox_lib
1
0
Fork 0
mirror of https://github.com/CommunityOx/ox_lib.git synced 2026-08-18 15:36:02 +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 } } || { value: null }
); );
// Backwards compat with new Select data type // 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) => row.options = row.options.map((option) =>
!option.label ? { ...option, label: option.value } : option !option.label ? { ...option, label: option.value } : option
) as Array<OptionValue>; ) as Array<OptionValue>;
@@ -140,7 +140,9 @@ const InputDialog: React.FC = () => {
index={index} 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 === 'number' && <NumberField control={form.control} row={row} index={index} />}
{row.type === 'slider' && <SliderField 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 === '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 { ISelect } from '../../../../interfaces/dialog';
import { Control, FieldValues, useController, UseFormRegisterReturn, UseFormSetValue } from 'react-hook-form'; import { Control, FieldValues, useController, UseFormRegisterReturn, UseFormSetValue } from 'react-hook-form';
import { FormValues } from '../../InputDialog'; import { FormValues } from '../../InputDialog';
@@ -14,25 +14,48 @@ const SelectField: React.FC<Props> = (props) => {
const controller = useController({ const controller = useController({
name: `test.${props.index}.value`, name: `test.${props.index}.value`,
control: props.control, 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 }, rules: { required: props.row.required },
}); });
return ( return (
<Select <>
data={props.row.options} {props.row.type === 'select' ? (
value={controller.field.value} <Select
name={controller.field.name} data={props.row.options}
ref={controller.field.ref} value={controller.field.value}
onBlur={controller.field.onBlur} name={controller.field.name}
onChange={controller.field.onChange} ref={controller.field.ref}
disabled={props.row.disabled} onBlur={controller.field.onBlur}
label={props.row.label} onChange={controller.field.onChange}
description={props.row.description} disabled={props.row.disabled}
withAsterisk={props.row.required} label={props.row.label}
clearable={props.row.clearable} description={props.row.description}
icon={props.row.icon && <FontAwesomeIcon icon={props.row.icon} fixedWidth />} 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 type OptionValue = { value: string; label?: string };
export interface ISelect { export interface ISelect {
type: 'select'; type: 'select' | 'multi-select';
label: string; label: string;
default?: string; default?: string | string[];
options: Array<OptionValue>; options: Array<OptionValue>;
disabled?: boolean; disabled?: boolean;
description?: string; description?: string;