diff --git a/apps/admin-x-settings/src/admin-x-ds/global/form/CurrencyField.tsx b/apps/admin-x-settings/src/admin-x-ds/global/form/CurrencyField.tsx new file mode 100644 index 0000000000..16a30256c1 --- /dev/null +++ b/apps/admin-x-settings/src/admin-x-ds/global/form/CurrencyField.tsx @@ -0,0 +1,39 @@ +import React, {useState} from 'react'; +import TextField, {TextFieldProps} from './TextField'; +import {currencyFromDecimal, currencyToDecimal} from '../../../utils/currency'; + +export type CurrencyFieldProps = Omit & { + currency?: string + onChange?: (value: number) => void +} + +const CurrencyField: React.FC = ({ + value, + onChange, + ...props +}) => { + const [localValue, setLocalValue] = useState(currencyToDecimal(parseInt(value || '0')).toString()); + + // While the user is editing we allow more lenient input, e.g. "1.32.566" to make it easier to type and change + const stripNonNumeric = (input: string) => input.replace(/[^\d.]+/g, ''); + + // The saved value is strictly a number with 2 decimal places + const forceCurrencyValue = (input: string) => { + return currencyFromDecimal(parseFloat(input.match(/[\d]+\.?[\d]{0,2}/)?.[0] || '0')); + }; + + return { + setLocalValue(currencyToDecimal(forceCurrencyValue(e.target.value)).toString()); + props.onBlur?.(e); + }} + onChange={(e) => { + setLocalValue(stripNonNumeric(e.target.value)); + onChange?.(forceCurrencyValue(e.target.value)); + }} + />; +}; + +export default CurrencyField; diff --git a/apps/admin-x-settings/src/admin-x-ds/global/form/Select.tsx b/apps/admin-x-settings/src/admin-x-ds/global/form/Select.tsx index 2623c909fe..06d7a33499 100644 --- a/apps/admin-x-settings/src/admin-x-ds/global/form/Select.tsx +++ b/apps/admin-x-settings/src/admin-x-ds/global/form/Select.tsx @@ -7,11 +7,13 @@ import clsx from 'clsx'; export interface SelectOption { value: string; label: string; + key?: string; className?: string; } export interface SelectOptionGroup { label: string; + key?: string; options: SelectOption[]; } @@ -100,10 +102,10 @@ const Select: React.FC = ({ {prompt && } {options.map(option => ( 'options' in option ? - + {option.options.map(child => ( :