Fix link and currency input (#2697)

* fix link focus

* fix currency value null

* fix currency code nullable

* change in progress

* currency is working

* modify path
This commit is contained in:
bosiraphael 2023-11-24 15:19:29 +01:00 committed by GitHub
parent 323c69948c
commit cf1b0bfccf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 84 additions and 70 deletions

View File

@ -48,8 +48,6 @@ export const FieldInput = ({
}: FieldInputProps) => {
const { fieldDefinition } = useContext(FieldContext);
console.log(fieldDefinition);
return (
<>
{isFieldRelation(fieldDefinition) ? (

View File

@ -2,7 +2,7 @@ import { useCurrencyField } from '../../hooks/useCurrencyField';
import { CurrencyDisplay } from '../content-display/components/CurrencyDisplay';
export const CurrencyFieldDisplay = () => {
const { fieldValue } = useCurrencyField();
const { initialAmount } = useCurrencyField();
return <CurrencyDisplay value={fieldValue} />;
return <CurrencyDisplay amount={initialAmount} />;
};

View File

@ -1,17 +1,10 @@
import { FieldCurrencyValue } from '@/ui/object/field/types/FieldMetadata';
import { convertCurrencyMicrosToCurrency } from '~/utils/convert-currency-amount';
import { EllipsisDisplay } from './EllipsisDisplay';
type CurrencyDisplayProps = {
value?: FieldCurrencyValue;
amount?: number | null;
};
// TODO: convert currencyCode to currency symbol
export const CurrencyDisplay = ({ value }: CurrencyDisplayProps) => {
return (
<EllipsisDisplay>
{convertCurrencyMicrosToCurrency(value?.amountMicros)}
</EllipsisDisplay>
);
export const CurrencyDisplay = ({ amount }: CurrencyDisplayProps) => {
return <EllipsisDisplay>{amount}</EllipsisDisplay>;
};

View File

@ -2,6 +2,11 @@ import { useContext } from 'react';
import { useRecoilState } from 'recoil';
import { FieldInitialValue } from '@/ui/object/field/types/FieldInitialValue';
import { canBeCastAsIntegerOrNull } from '~/utils/cast-as-integer-or-null';
import {
convertCurrencyMicrosToCurrency,
convertCurrencyToCurrencyMicros,
} from '~/utils/convert-currency-amount';
import { FieldContext } from '../../contexts/FieldContext';
import { useFieldInitialValue } from '../../hooks/useFieldInitialValue';
@ -17,15 +22,18 @@ const initializeValue = (
fieldValue: FieldCurrencyValue,
) => {
if (fieldInitialValue?.isEmpty) {
return { amountMicros: 0, currencyCode: 'USD' };
return { amount: null, currencyCode: 'USD' };
}
if (!isNaN(Number(fieldInitialValue?.value))) {
return {
amountMicros: Number(fieldInitialValue?.value),
amount: Number(fieldInitialValue?.value),
currencyCode: 'USD',
};
}
return fieldValue;
return {
amount: convertCurrencyMicrosToCurrency(fieldValue.amountMicros),
currencyCode: fieldValue.currencyCode,
};
};
export const useCurrencyField = () => {
@ -44,22 +52,43 @@ export const useCurrencyField = () => {
const persistField = usePersistField();
const persistCurrencyField = (newValue: FieldCurrencyValue) => {
if (!isFieldCurrencyValue(newValue)) {
const persistCurrencyField = ({
amountText,
currencyCode,
}: {
amountText: string;
currencyCode: string;
}) => {
if (!canBeCastAsIntegerOrNull(amountText)) {
return;
}
const amount = parseFloat(amountText);
persistField(newValue);
const newCurrencyValue = {
amountMicros: isNaN(amount)
? null
: convertCurrencyToCurrencyMicros(amount),
currencyCode: currencyCode,
};
if (!isFieldCurrencyValue(newCurrencyValue)) {
return;
}
persistField(newCurrencyValue);
};
const fieldInitialValue = useFieldInitialValue();
const initialValue = initializeValue(fieldInitialValue, fieldValue);
const initialAmount = initialValue.amount;
const initialCurrencyCode = initialValue.currencyCode;
return {
fieldDefinition,
fieldValue,
initialValue,
initialAmount,
initialCurrencyCode,
setFieldValue,
hotkeyScope,
persistCurrencyField,

View File

@ -1,8 +1,4 @@
import { TextInput } from '@/ui/object/field/meta-types/input/components/internal/TextInput';
import {
convertCurrencyMicrosToCurrency,
convertCurrencyToCurrencyMicros,
} from '~/utils/convert-currency-amount';
import { useCurrencyField } from '../../hooks/useCurrencyField';
@ -24,58 +20,57 @@ export const CurrencyFieldInput = ({
onTab,
onShiftTab,
}: CurrencyFieldInputProps) => {
const { hotkeyScope, initialValue, persistCurrencyField } =
useCurrencyField();
const {
hotkeyScope,
initialAmount,
initialCurrencyCode,
persistCurrencyField,
} = useCurrencyField();
const handleEnter = (newValue: string) => {
onEnter?.(() =>
onEnter?.(() => {
persistCurrencyField({
amountMicros:
convertCurrencyToCurrencyMicros(parseFloat(newValue)) ?? 0,
currencyCode: initialValue.currencyCode,
}),
);
amountText: newValue,
currencyCode: initialCurrencyCode,
});
});
};
const handleEscape = (newValue: string) => {
onEscape?.(() =>
onEscape?.(() => {
persistCurrencyField({
amountMicros:
convertCurrencyToCurrencyMicros(parseFloat(newValue)) ?? 0,
currencyCode: initialValue.currencyCode,
}),
);
amountText: newValue,
currencyCode: initialCurrencyCode,
});
});
};
const handleClickOutside = (
event: MouseEvent | TouchEvent,
newValue: string,
) => {
onClickOutside?.(() =>
onClickOutside?.(() => {
persistCurrencyField({
amountMicros:
convertCurrencyToCurrencyMicros(parseFloat(newValue)) ?? 0,
currencyCode: initialValue.currencyCode,
}),
);
amountText: newValue,
currencyCode: initialCurrencyCode,
});
});
};
const handleTab = (newValue: string) => {
onTab?.(() =>
onTab?.(() => {
persistCurrencyField({
amountMicros:
convertCurrencyToCurrencyMicros(parseFloat(newValue)) ?? 0,
currencyCode: initialValue.currencyCode,
}),
);
amountText: newValue,
currencyCode: initialCurrencyCode,
});
});
};
const handleShiftTab = (newValue: string) => {
onShiftTab?.(() =>
persistCurrencyField({
amountMicros:
convertCurrencyToCurrencyMicros(parseFloat(newValue)) ?? 0,
currencyCode: initialValue.currencyCode,
amountText: newValue,
currencyCode: initialCurrencyCode,
}),
);
};
@ -83,11 +78,8 @@ export const CurrencyFieldInput = ({
return (
<FieldInputOverlay>
<TextInput
value={
convertCurrencyMicrosToCurrency(
initialValue.amountMicros,
)?.toString() ?? ''
}
value={initialAmount?.toString() ?? ''}
autoFocus
placeholder="Currency"
onClickOutside={handleClickOutside}
onEnter={handleEnter}

View File

@ -74,6 +74,7 @@ export const LinkFieldInput = ({
<FieldInputOverlay>
<TextInput
value={initialValue.url}
autoFocus
placeholder="URL"
hotkeyScope={hotkeyScope}
onClickOutside={handleClickOutside}

View File

@ -103,7 +103,10 @@ export type FieldBooleanValue = boolean;
export type FieldPhoneValue = string;
export type FieldEmailValue = string;
export type FieldLinkValue = { url: string; label: string };
export type FieldCurrencyValue = { currencyCode: string; amountMicros: number };
export type FieldCurrencyValue = {
currencyCode: string;
amountMicros: number | null;
};
export type FieldFullNameValue = { firstName: string; lastName: string };
export type FieldProbabilityValue = number;

View File

@ -3,8 +3,8 @@ import { z } from 'zod';
import { FieldCurrencyValue } from '../FieldMetadata';
const currencySchema = z.object({
currencyCode: z.string(),
amountMicros: z.number(),
currencyCode: z.string().nullable(),
amountMicros: z.number().nullable(),
});
export const isFieldCurrencyValue = (

View File

@ -1,10 +1,8 @@
import { isUndefined } from '@sniptt/guards';
export const convertCurrencyToCurrencyMicros = (
currencyAmount: number | undefined,
currencyAmount: number | null | undefined,
) => {
if (!currencyAmount) {
return undefined;
if (currencyAmount == null) {
return null;
}
const currencyAmountAsNumber = +currencyAmount;
if (isNaN(currencyAmountAsNumber)) {
@ -18,10 +16,10 @@ export const convertCurrencyToCurrencyMicros = (
};
export const convertCurrencyMicrosToCurrency = (
currencyAmountMicros: number | undefined,
currencyAmountMicros: number | null | undefined,
) => {
if (isUndefined(currencyAmountMicros)) {
return undefined;
if (currencyAmountMicros == null) {
return null;
}
const currencyAmountMicrosAsNumber = +currencyAmountMicros;
if (isNaN(currencyAmountMicrosAsNumber)) {