S-VPN/panel-web
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ feat(input): Add minimum value constraint and enhance number handling in EnhancedInput

Browse Source
This commit is contained in:
web@ppanel 2025-03-13 17:32:36 +07:00
parent 092477b2d3
commit ce3197298d
3 changed files with 89 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
apps/admin/app/dashboard/user/[id]/user-profile/basic-info-form.tsx
View File

@ -113,6 +113,7 @@ export function BasicInfoForm({ user, refetch }: { user: API.User; refetch: () =
<FormControl>
<EnhancedInput
type='number'
min={0}
value={field.value}
prefix={currency?.currency_symbol ?? '$'}
formatInput={(value) => unitConversion('centsToDollars', value)}
@ -136,6 +137,7 @@ export function BasicInfoForm({ user, refetch }: { user: API.User; refetch: () =
<FormControl>
<EnhancedInput
type='number'
min={0}
value={field.value}
prefix={currency?.currency_symbol ?? '$'}
formatInput={(value) => unitConversion('centsToDollars', value)}
@ -159,6 +161,7 @@ export function BasicInfoForm({ user, refetch }: { user: API.User; refetch: () =
<FormControl>
<EnhancedInput
type='number'
min={0}
value={field.value}
prefix={currency?.currency_symbol ?? '$'}
formatInput={(value) => unitConversion('centsToDollars', value)}

66
packages/ui/src/custom-components/enhanced-input.tsx
View File

@ -6,7 +6,7 @@ export interface EnhancedInputProps
extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'prefix'> {
prefix?: string | ReactNode;
suffix?: string | ReactNode;
formatInput?: (value: string | number) => string;
formatInput?: (value: string | number) => string | number;
formatOutput?: (value: string | number) => string | number;
onValueChange?: (value: string | number) => void;
onValueBlur?: (value: string | number) => void;
@ -26,50 +26,94 @@ export function EnhancedInput({
...props
}: EnhancedInputProps) {
const getProcessedValue = (inputValue: unknown) => {
const newValue = inputValue === '' || inputValue === 0 ? '' : String(inputValue ?? '');
if (inputValue === '' || inputValue === 0 || inputValue === '0') return '';
const newValue = String(inputValue ?? '');
return formatInput ? formatInput(newValue) : newValue;
};
const [value, setValue] = useState<string>(() => getProcessedValue(initialValue));
const [value, setValue] = useState<string | number>(() => getProcessedValue(initialValue));
// @ts-expect-error - This is a controlled component
const [internalValue, setInternalValue] = useState<string | number>(initialValue ?? '');
useEffect(() => {
if (initialValue !== value) {
if (initialValue !== internalValue) {
const newValue = getProcessedValue(initialValue);
if (value !== newValue) setValue(newValue);
if (value !== newValue) {
setValue(newValue);
// @ts-expect-error - This is a controlled component
setInternalValue(initialValue ?? '');
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [initialValue, formatInput]);
const processValue = (inputValue: string) => {
const processValue = (inputValue: string | number) => {
let processedValue: number | string = inputValue?.toString().trim();
if (processedValue === '0' && props.type === 'number') {
return 0;
}
if (processedValue && props.type === 'number') processedValue = Number(processedValue);
return formatOutput ? formatOutput(processedValue) : processedValue;
};
const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
let inputValue = e.target.value;
if (props.type === 'number' && inputValue) {
if (props.type === 'number') {
if (inputValue === '0') {
setValue('');
setInternalValue(0);
onValueChange?.(0);
return;
}
if (/^-?\d*\.?\d*$/.test(inputValue) || inputValue === '-' || inputValue === '.') {
const numericValue = Number(inputValue);
if (!isNaN(numericValue)) {
if (!isNaN(numericValue) && inputValue !== '-' && inputValue !== '.') {
const min = Number.isFinite(props.min) ? props.min : -Infinity;
const max = Number.isFinite(props.max) ? props.max : Infinity;
inputValue = String(Math.max(min!, Math.min(max!, numericValue)));
const constrainedValue = Math.max(min!, Math.min(max!, numericValue));
inputValue = String(constrainedValue);
setInternalValue(constrainedValue);
} else {
setInternalValue(inputValue);
}
setValue(inputValue === '0' ? '' : inputValue);
}
} else {
setValue(inputValue);
setInternalValue(inputValue);
}
const outputValue = processValue(inputValue);
console.log();
onValueChange?.(outputValue);
};
const handleBlur = () => {
if (props.type === 'number' && value) {
if (value === '-' || value === '.') {
setValue('');
setInternalValue('');
onValueBlur?.('');
return;
}
// 确保0值显示为空
if (value === '0') {
setValue('');
onValueBlur?.(0);
return;
}
}
const outputValue = processValue(value);
if ((initialValue || '') !== outputValue) {
onValueBlur?.(outputValue);
}
};
const renderPrefix = () => {
return typeof prefix === 'string' ? (
<div className='bg-muted relative mr-px flex h-9 items-center text-nowrap px-3'>{prefix}</div>
@ -77,6 +121,7 @@ export function EnhancedInput({
prefix
);
};
const renderSuffix = () => {
return typeof suffix === 'string' ? (
<div className='bg-muted relative ml-px flex h-9 items-center text-nowrap px-3'>{suffix}</div>
@ -95,6 +140,7 @@ export function EnhancedInput({
>
{renderPrefix()}
<Input
step={0.01}
{...props}
value={value}
className='block rounded-none border-none'

49
packages/ui/src/utils/unit-conversions.ts
View File

@ -1,32 +1,35 @@
import { evaluate, format } from 'mathjs';
export function unitConversion(
type: 'centsToDollars' | 'dollarsToCents' | 'bitsToMb' | 'mbToBits' | 'bytesToGb' | 'gbToBytes',
value?: number | string,
) {
if (!value) return;
switch (type) {
case 'centsToDollars':
return evaluate(`${value} / 100`);
case 'dollarsToCents':
return evaluate(`${value} * 100`);
case 'bitsToMb':
return evaluate(`${value} / 1024 / 1024`);
case 'mbToBits':
return evaluate(`${value} * 1024 * 1024`);
case 'bytesToGb':
return evaluate(`${value} / 1024 / 1024 / 1024`);
case 'gbToBytes':
return evaluate(`${value} * 1024 * 1024 * 1024`);
default:
throw new Error('Invalid conversion type');
}
type ConversionType =
| 'centsToDollars'
| 'dollarsToCents'
| 'bitsToMb'
| 'mbToBits'
| 'bytesToGb'
| 'gbToBytes';
const conversionConfig: Record<ConversionType, { formula: string; precision: number }> = {
centsToDollars: { formula: 'value / 100', precision: 2 },
dollarsToCents: { formula: 'value * 100', precision: 0 },
bitsToMb: { formula: 'value / 1024 / 1024', precision: 2 },
mbToBits: { formula: 'value * 1024 * 1024', precision: 0 },
bytesToGb: { formula: 'value / 1024 / 1024 / 1024', precision: 2 },
gbToBytes: { formula: 'value * 1024 * 1024 * 1024', precision: 0 },
};
export function unitConversion(type: ConversionType, value?: number | string) {
if (!value) return 0;
const config = conversionConfig[type];
if (!config) throw new Error('Invalid conversion type');
const formula = config.formula.replace('value', `${value}`);
const result = evaluate(formula);
return Number(format(result, { notation: 'fixed', precision: config.precision }));
}
export function evaluateWithPrecision(expression: string) {
const result = evaluate(expression);
const formatted = format(result, { notation: 'fixed', precision: 2 });
return Number(formatted);
}