admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Implement a masked currency input (#5010)

Browse Source 
### Description
Implement a masked currency input

### Refs
#4358 

### Demo
https://jam.dev/c/93da117c-b193-488f-b9f9-906b33ac5190

Fixes #4358

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: Toledodev <rafael.toledo@engenharia.ufjf.br>
Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
This commit is contained in:
gitstart-twenty
2024-04-18 17:29:07 +05:45
committed by GitHub
parent b08e95494c
commit 168358a327
2 changed files with 16 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useCurrencyField.ts
View File

@ -4,7 +4,6 @@ import { useRecoilState, useRecoilValue } from 'recoil';
import { useRecordFieldInput } from '@/object-record/record-field/hooks/useRecordFieldInput'; import { useRecordFieldInput } from '@/object-record/record-field/hooks/useRecordFieldInput';
import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector'; import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector';
import { FieldMetadataType } from '~/generated-metadata/graphql'; import { FieldMetadataType } from '~/generated-metadata/graphql';
import { canBeCastAsIntegerOrNull } from '~/utils/cast-as-integer-or-null';
import { convertCurrencyToCurrencyMicros } from '~/utils/convert-currency-amount'; import { convertCurrencyToCurrencyMicros } from '~/utils/convert-currency-amount';
import { FieldContext } from '../../contexts/FieldContext'; import { FieldContext } from '../../contexts/FieldContext';
@ -41,9 +40,6 @@ export const useCurrencyField = () => {
amountText: string; amountText: string;
currencyCode: string; currencyCode: string;
}) => { }) => {
if (!canBeCastAsIntegerOrNull(amountText)) {
return;
}
const amount = parseFloat(amountText); const amount = parseFloat(amountText);
const newCurrencyValue = { const newCurrencyValue = {

23
packages/twenty-front/src/modules/ui/field/input/components/CurrencyInput.tsx
View File

@ -1,4 +1,5 @@
import { ChangeEvent, useEffect, useMemo, useRef, useState } from 'react'; import { useEffect, useMemo, useRef, useState } from 'react';
import { IMaskInput, IMaskInputProps } from 'react-imask';
import { useTheme } from '@emotion/react'; import { useTheme } from '@emotion/react';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { IconComponent } from 'twenty-ui'; import { IconComponent } from 'twenty-ui';
@ -8,7 +9,10 @@ import { SETTINGS_FIELD_CURRENCY_CODES } from '@/settings/data-model/constants/S
import { CurrencyPickerDropdownButton } from '@/ui/input/components/internal/currency/components/CurrencyPickerDropdownButton'; import { CurrencyPickerDropdownButton } from '@/ui/input/components/internal/currency/components/CurrencyPickerDropdownButton';
import { TEXT_INPUT_STYLE } from '@/ui/theme/constants/TextInputStyle'; import { TEXT_INPUT_STYLE } from '@/ui/theme/constants/TextInputStyle';
export const StyledInput = styled.input` type StyledInputProps = React.ComponentProps<'input'> &
IMaskInputProps<HTMLInputElement>;
export const StyledIMaskInput = styled(IMaskInput)<StyledInputProps>`
margin: 0; margin: 0;
${TEXT_INPUT_STYLE} ${TEXT_INPUT_STYLE}
width: 100%; width: 100%;
@ -79,9 +83,9 @@ export const CurrencyInput = ({
const wrapperRef = useRef<HTMLInputElement>(null); const wrapperRef = useRef<HTMLInputElement>(null);
const handleChange = (event: ChangeEvent<HTMLInputElement>) => { const handleChange = (value: string) => {
setInternalText(event.target.value); setInternalText(value);
onChange?.(event.target.value); onChange?.(value);
}; };
const handleCurrencyChange = (currency: Currency) => { const handleCurrencyChange = (currency: Currency) => {
@ -131,10 +135,15 @@ export const CurrencyInput = ({
<Icon size={theme.icon.size.md} stroke={theme.icon.stroke.sm} /> <Icon size={theme.icon.size.md} stroke={theme.icon.stroke.sm} />
)} )}
</StyledIcon> </StyledIcon>
<StyledInput <StyledIMaskInput
mask={Number}
thousandsSeparator={','}
radix="."
unmask="typed"
onAccept={(value: string) => handleChange(value)}
inputRef={wrapperRef}
autoComplete="off" autoComplete="off"
placeholder={placeholder} placeholder={placeholder}
onChange={handleChange}
autoFocus={autoFocus} autoFocus={autoFocus}
value={value} value={value}
/> />