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

feat(web/input): allow defining icon for number row field

Browse Source
This commit is contained in:
Luke
2022-09-08 12:00:41 +02:00
parent 473a0f480d
commit b638e435ea
4 changed files with 9 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
web/src/features/dev/debug/input.ts
View File

@@ -27,6 +27,7 @@ export const debugInput = () => {
default: 12, default: 12,
min: 3, min: 3,
max: 10, max: 10,
icon: 'receipt',
}, },
{ type: 'slider', label: 'Slide bar', min: 10, max: 50, step: 2 }, { type: 'slider', label: 'Slide bar', min: 10, max: 50, step: 2 },
], ],

2
web/src/features/dialog/components/input.tsx
View File

@@ -22,7 +22,7 @@ const InputField: React.FC<Props> = (props) => {
<Text>{props.row.label}</Text> <Text>{props.row.label}</Text>
<InputGroup> <InputGroup>
{props.row.icon && ( {props.row.icon && (
<InputLeftElement pointerEvents="none" children={<FontAwesomeIcon icon={props.row.icon} />} /> <InputLeftElement pointerEvents="none" children={<FontAwesomeIcon icon={props.row.icon} fixedWidth />} />
)} )}
<Input <Input
onChange={(e: React.ChangeEvent<HTMLInputElement>) => props.handleChange(e.target.value, props.index)} onChange={(e: React.ChangeEvent<HTMLInputElement>) => props.handleChange(e.target.value, props.index)}

7
web/src/features/dialog/components/number.tsx
View File

@@ -6,9 +6,11 @@ import {
NumberInputStepper, NumberInputStepper,
NumberIncrementStepper, NumberIncrementStepper,
NumberDecrementStepper, NumberDecrementStepper,
InputLeftElement,
} from '@chakra-ui/react'; } from '@chakra-ui/react';
import { useEffect } from 'react'; import { useEffect } from 'react';
import { INumber } from '../../../interfaces/dialog'; import { INumber } from '../../../interfaces/dialog';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
interface Props { interface Props {
row: INumber; row: INumber;
@@ -30,7 +32,10 @@ const NumberField: React.FC<Props> = (props) => {
min={props.row.min} min={props.row.min}
max={props.row.max} max={props.row.max}
> >
<NumberInputField placeholder={props.row.placeholder} /> {props.row.icon && (
<InputLeftElement pointerEvents="none" children={<FontAwesomeIcon icon={props.row.icon} fixedWidth />} />
)}
<NumberInputField placeholder={props.row.placeholder} pl={props.row.icon ? '40px' : undefined} />
<NumberInputStepper> <NumberInputStepper>
<NumberIncrementStepper /> <NumberIncrementStepper />
<NumberDecrementStepper /> <NumberDecrementStepper />

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

@@ -27,6 +27,7 @@ export interface INumber {
label: string; label: string;
placeholder?: string; placeholder?: string;
default?: number; default?: number;
icon?: IconProp;
min?: number; min?: number;
max?: number; max?: number;
} }