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

refactor(web/input): improve typings

Browse Source
This commit is contained in:
Luke
2023-02-14 11:17:39 +01:00
parent 7bb2eb2ea7
commit 59a495a541
2 changed files with 21 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
web/src/features/dialog/components/fields/date.tsx
View File

@@ -29,9 +29,9 @@ const DateField: React.FC<Props> = (props) => {
onChange={(date) => controller.field.onChange(date ? date.getTime() : null)} onChange={(date) => controller.field.onChange(date ? date.getTime() : null)}
label={props.row.label} label={props.row.label}
description={props.row.description} description={props.row.description}
placeholder={props.row.placeholder} placeholder={props.row.format}
disabled={props.row.disabled} disabled={props.row.disabled}
inputFormat="DD/MM/YYYY" inputFormat={props.row.format}
withAsterisk={props.row.required} withAsterisk={props.row.required}
clearable={props.row.clearable} clearable={props.row.clearable}
icon={props.row.icon && <FontAwesomeIcon fixedWidth icon={props.row.icon} />} icon={props.row.icon && <FontAwesomeIcon fixedWidth icon={props.row.icon} />}
@@ -56,9 +56,9 @@ const DateField: React.FC<Props> = (props) => {
} }
label={props.row.label} label={props.row.label}
description={props.row.description} description={props.row.description}
placeholder={props.row.placeholder} placeholder={props.row.format}
disabled={props.row.disabled} disabled={props.row.disabled}
inputFormat="DD/MM/YYYY" inputFormat={props.row.format}
withAsterisk={props.row.required} withAsterisk={props.row.required}
clearable={props.row.clearable} clearable={props.row.clearable}
icon={props.row.icon && <FontAwesomeIcon fixedWidth icon={props.row.icon} />} icon={props.row.icon && <FontAwesomeIcon fixedWidth icon={props.row.icon} />}

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

@@ -1,15 +1,18 @@
import { IconProp } from '@fortawesome/fontawesome-svg-core'; import { IconProp } from '@fortawesome/fontawesome-svg-core';
export interface IInput { type BaseField<T, U> = {
type: 'input'; type: T;
label: string; label: string;
description?: string;
placeholder?: string; placeholder?: string;
default?: string; default?: U;
password?: boolean;
icon?: IconProp; icon?: IconProp;
disabled?: boolean; disabled?: boolean;
description?: string;
required?: boolean; required?: boolean;
};
export interface IInput extends BaseField<'input', string> {
password?: boolean;
} }
export interface ICheckbox { export interface ICheckbox {
@@ -22,90 +25,40 @@ export interface ICheckbox {
} }
export type OptionValue = { value: string; label?: string }; export type OptionValue = { value: string; label?: string };
export interface ISelect { export interface ISelect extends BaseField<'select' | 'multi-select', string | string[]> {
type: 'select' | 'multi-select';
label: string;
default?: string | string[];
options: Array<OptionValue>; options: Array<OptionValue>;
disabled?: boolean;
description?: string;
required?: boolean;
clearable?: boolean; clearable?: boolean;
icon?: IconProp;
} }
export interface INumber { export interface INumber extends BaseField<'number', number> {
type: 'number';
label: string;
placeholder?: string;
default?: number;
icon?: IconProp;
min?: number; min?: number;
max?: number; max?: number;
disabled?: boolean;
description?: string;
required?: boolean;
} }
export interface ISlider { export interface ISlider extends Omit<BaseField<'slider', number>, 'description' | 'placeholder'> {
type: 'slider';
label: string;
default?: number;
min?: number; min?: number;
max?: number; max?: number;
step?: number; step?: number;
disabled?: boolean;
description?: string;
} }
export interface IColorInput { export interface IColorInput extends BaseField<'color', string> {
type: 'color';
label: string;
default?: string;
disabled?: boolean;
description?: string;
format?: 'hex' | 'hexa' | 'rgb' | 'rgba' | 'hsl' | 'hsla'; format?: 'hex' | 'hexa' | 'rgb' | 'rgba' | 'hsl' | 'hsla';
required?: boolean;
icon?: IconProp;
} }
export interface IDateInput { export interface IDateInput
type: 'date' | 'date-range'; extends Omit<BaseField<'date' | 'date-range', string | [string, string] | true>, 'placeholder'> {
label: string; format?: string;
default?: string | [string, string] | true;
disabled?: boolean;
description?: string;
format?: '12' | '24' | undefined;
required?: boolean;
placeholder?: string;
clearable?: boolean; clearable?: boolean;
min?: string; min?: string;
max?: string; max?: string;
icon?: IconProp;
} }
export interface ITimeInput { export interface ITimeInput extends Omit<BaseField<'time', string>, 'placeholder'> {
type: 'time';
label: string;
default?: string;
disabled?: boolean;
description?: string;
format?: '12' | '24'; format?: '12' | '24';
required?: boolean;
clearable?: boolean; clearable?: boolean;
placeholder?: string;
icon?: IconProp;
} }
export interface ITextarea { export interface ITextarea extends BaseField<'textarea', string> {
type: 'textarea';
label: string;
default?: string;
disabled?: boolean;
description?: string;
required?: boolean;
placeholder?: string;
icon?: IconProp;
autosize?: boolean; autosize?: boolean;
min?: number; min?: number;
max?: number; max?: number;