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): font awesome icon animations

Browse Source
This commit is contained in:
Luke
2023-11-15 15:28:21 +01:00
parent a50f7a2052
commit 882e372895
24 changed files with 124 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
web/src/features/dialog/components/fields/color.tsx
View File

@@ -3,6 +3,7 @@ import { Control, useController } from 'react-hook-form';
import { FormValues } from '../../InputDialog';
import { ColorInput } from '@mantine/core';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import LibIcon from '../../../../components/LibIcon';
interface Props {
row: IColorInput;
@@ -32,7 +33,7 @@ const ColorField: React.FC<Props> = (props) => {
defaultValue={props.row.default}
format={props.row.format}
withAsterisk={props.row.required}
icon={props.row.icon && <FontAwesomeIcon icon={props.row.icon} fixedWidth />}
icon={props.row.icon && <LibIcon icon={props.row.icon} fixedWidth />}
/>
);
};

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

@@ -3,6 +3,7 @@ import { Control, useController } from 'react-hook-form';
import { FormValues } from '../../InputDialog';
import { DatePicker, DateRangePicker } from '@mantine/dates';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import LibIcon from '../../../../components/LibIcon';
interface Props {
row: IDateInput;
@@ -34,7 +35,7 @@ const DateField: React.FC<Props> = (props) => {
inputFormat={props.row.format}
withAsterisk={props.row.required}
clearable={props.row.clearable}
icon={props.row.icon && <FontAwesomeIcon fixedWidth icon={props.row.icon} />}
icon={props.row.icon && <LibIcon fixedWidth icon={props.row.icon} />}
minDate={props.row.min ? new Date(props.row.min) : undefined}
maxDate={props.row.max ? new Date(props.row.max) : undefined}
/>
@@ -51,7 +52,9 @@ const DateField: React.FC<Props> = (props) => {
name={controller.field.name}
ref={controller.field.ref}
onBlur={controller.field.onBlur}
onChange={(dates) => controller.field.onChange(dates.map((date: Date | null) => date ? date.getTime() : null))}
onChange={(dates) =>
controller.field.onChange(dates.map((date: Date | null) => (date ? date.getTime() : null)))
}
label={props.row.label}
description={props.row.description}
placeholder={props.row.format}
@@ -59,7 +62,7 @@ const DateField: React.FC<Props> = (props) => {
inputFormat={props.row.format}
withAsterisk={props.row.required}
clearable={props.row.clearable}
icon={props.row.icon && <FontAwesomeIcon fixedWidth icon={props.row.icon} />}
icon={props.row.icon && <LibIcon fixedWidth icon={props.row.icon} />}
minDate={props.row.min ? new Date(props.row.min) : undefined}
maxDate={props.row.max ? new Date(props.row.max) : undefined}
/>

7
web/src/features/dialog/components/fields/input.tsx
View File

@@ -3,6 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import React from 'react';
import { IInput } from '../../../../typings/dialog';
import { UseFormRegisterReturn } from 'react-hook-form';
import LibIcon from '../../../../components/LibIcon';
interface Props {
register: UseFormRegisterReturn;
@@ -27,7 +28,7 @@ const InputField: React.FC<Props> = (props) => {
defaultValue={props.row.default}
label={props.row.label}
description={props.row.description}
icon={props.row.icon && <FontAwesomeIcon icon={props.row.icon} fixedWidth />}
icon={props.row.icon && <LibIcon icon={props.row.icon} fixedWidth />}
placeholder={props.row.placeholder}
minLength={props.row.min}
maxLength={props.row.max}
@@ -40,14 +41,14 @@ const InputField: React.FC<Props> = (props) => {
defaultValue={props.row.default}
label={props.row.label}
description={props.row.description}
icon={props.row.icon && <FontAwesomeIcon icon={props.row.icon} fixedWidth />}
icon={props.row.icon && <LibIcon icon={props.row.icon} fixedWidth />}
placeholder={props.row.placeholder}
minLength={props.row.min}
maxLength={props.row.max}
disabled={props.row.disabled}
withAsterisk={props.row.required}
visibilityToggleIcon={({ reveal, size }) => (
<FontAwesomeIcon
<LibIcon
icon={reveal ? 'eye-slash' : 'eye'}
fontSize={size}
cursor="pointer"

3
web/src/features/dialog/components/fields/number.tsx
View File

@@ -3,6 +3,7 @@ import { INumber } from '../../../../typings/dialog';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Control, useController } from 'react-hook-form';
import { FormValues } from '../../InputDialog';
import LibIcon from '../../../../components/LibIcon';
interface Props {
row: INumber;
@@ -33,7 +34,7 @@ const NumberField: React.FC<Props> = (props) => {
step={props.row.step}
precision={props.row.precision}
disabled={props.row.disabled}
icon={props.row.icon && <FontAwesomeIcon icon={props.row.icon} fixedWidth />}
icon={props.row.icon && <LibIcon icon={props.row.icon} fixedWidth />}
withAsterisk={props.row.required}
/>
);

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

@@ -3,6 +3,7 @@ import { ISelect } from '../../../../typings';
import { Control, useController } from 'react-hook-form';
import { FormValues } from '../../InputDialog';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import LibIcon from '../../../../components/LibIcon';
interface Props {
row: ISelect;
@@ -32,7 +33,7 @@ const SelectField: React.FC<Props> = (props) => {
description={props.row.description}
withAsterisk={props.row.required}
clearable={props.row.clearable}
icon={props.row.icon && <FontAwesomeIcon icon={props.row.icon} fixedWidth />}
icon={props.row.icon && <LibIcon icon={props.row.icon} fixedWidth />}
/>
) : (
<>
@@ -49,7 +50,7 @@ const SelectField: React.FC<Props> = (props) => {
description={props.row.description}
withAsterisk={props.row.required}
clearable={props.row.clearable}
icon={props.row.icon && <FontAwesomeIcon icon={props.row.icon} fixedWidth />}
icon={props.row.icon && <LibIcon icon={props.row.icon} fixedWidth />}
/>
)}
</>

4
web/src/features/dialog/components/fields/textarea.tsx
View File

@@ -1,8 +1,8 @@
import { Textarea } from '@mantine/core';
import { UseFormRegisterReturn } from 'react-hook-form';
import { ITextarea } from '../../../../typings/dialog';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import React from 'react';
import LibIcon from '../../../../components/LibIcon';
interface Props {
register: UseFormRegisterReturn;
@@ -17,7 +17,7 @@ const TextareaField: React.FC<Props> = (props) => {
defaultValue={props.row.default}
label={props.row.label}
description={props.row.description}
icon={props.row.icon && <FontAwesomeIcon icon={props.row.icon} fixedWidth />}
icon={props.row.icon && <LibIcon icon={props.row.icon} fixedWidth />}
placeholder={props.row.placeholder}
disabled={props.row.disabled}
withAsterisk={props.row.required}

4
web/src/features/dialog/components/fields/time.tsx
View File

@@ -1,8 +1,8 @@
import { TimeInput } from '@mantine/dates';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Control, useController } from 'react-hook-form';
import { ITimeInput } from '../../../../typings/dialog';
import { FormValues } from '../../InputDialog';
import LibIcon from '../../../../components/LibIcon';
interface Props {
row: ITimeInput;
@@ -30,7 +30,7 @@ const TimeField: React.FC<Props> = (props) => {
format={props.row.format || '12'}
withAsterisk={props.row.required}
clearable={props.row.clearable}
icon={props.row.icon && <FontAwesomeIcon fixedWidth icon={props.row.icon} />}
icon={props.row.icon && <LibIcon fixedWidth icon={props.row.icon} />}
/>
);
};