Skip to content

Commit b6babda

Browse files
Merge pull request #356 from nginformatica/chore/update-deps
feat/migrate react-number-format
2 parents 910d700 + 8f67fa8 commit b6babda

File tree

8 files changed

+420
-238
lines changed

8 files changed

+420
-238
lines changed

.eslintrc.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,6 @@ const rulesTypescript = {
132132
'@typescript-eslint/no-confusing-void-expression': 'off',
133133
'@typescript-eslint/explicit-module-boundary-types': 'off',
134134

135-
'@typescript-eslint/ban-types': 'warn',
136135
'@typescript-eslint/no-var-requires': 'warn',
137136
'@typescript-eslint/no-unsafe-argument': 'warn',
138137
'@typescript-eslint/no-non-null-assertion': 'warn',

package.json

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "flipper-ui",
3-
"version": "0.34.3",
3+
"version": "0.34.4",
44
"description": "React UI based on the @mui/material toolkit for the web",
55
"main": "dist/index.js",
66
"author": "NG",
@@ -35,41 +35,41 @@
3535
"dependencies": {
3636
"@emotion/react": "11.13.0",
3737
"@emotion/styled": "11.13.0",
38-
"@mui/icons-material": "5.16.5",
39-
"@mui/material": "5.16.5",
40-
"@mui/styles": "5.16.5",
41-
"@mui/x-date-pickers": "7.11.1",
38+
"@mui/icons-material": "5.16.6",
39+
"@mui/material": "5.16.6",
40+
"@mui/styles": "5.16.6",
41+
"@mui/x-date-pickers": "7.12.0",
4242
"date-fns": "2.30.0",
43-
"ramda": "0.25.0",
43+
"ramda": "0.30.1",
4444
"react-loading-skeleton": "3.4.0",
45-
"react-number-format": "4.4.1",
45+
"react-number-format": "5.4.0",
4646
"sprintf-js": "1.1.3",
4747
"uuid": "10.0.0"
4848
},
4949
"devDependencies": {
5050
"@babel/cli": "7.24.8",
51-
"@babel/core": "7.24.9",
51+
"@babel/core": "7.25.2",
5252
"@babel/plugin-transform-runtime": "7.24.7",
53-
"@babel/preset-env": "7.25.0",
53+
"@babel/preset-env": "7.25.3",
5454
"@babel/preset-typescript": "7.24.7",
5555
"@faker-js/faker": "8.4.1",
5656
"@storybook/addon-essentials": "7.6.17",
5757
"@storybook/addon-styling-webpack": "1.0.0",
5858
"@storybook/react": "7.6.17",
5959
"@storybook/react-webpack5": "7.6.17",
60-
"@stylistic/eslint-plugin": "2.4.0",
60+
"@stylistic/eslint-plugin": "2.6.1",
6161
"@testing-library/dom": "10.4.0",
6262
"@testing-library/jest-dom": "6.4.8",
6363
"@testing-library/react": "16.0.0",
6464
"@testing-library/user-event": "14.5.2",
6565
"@types/jest": "29.5.12",
66-
"@types/node": "22.0.0",
67-
"@types/ramda": "0.25.36",
66+
"@types/node": "22.1.0",
67+
"@types/ramda": "0.30.1",
6868
"@types/react": "18.3.3",
6969
"@types/sprintf-js": "1.1.4",
7070
"@types/uuid": "10.0.0",
71-
"@typescript-eslint/eslint-plugin": "7.18.0",
72-
"@typescript-eslint/parser": "7.18.0",
71+
"@typescript-eslint/eslint-plugin": "8.0.0",
72+
"@typescript-eslint/parser": "8.0.0",
7373
"babel-loader": "9.1.3",
7474
"babel-plugin-import": "1.13.8",
7575
"babel-plugin-module-resolver": "5.0.2",
@@ -89,7 +89,7 @@
8989
"react-dom": "18.3.1",
9090
"storybook": "7.6.17",
9191
"styled-components": "6.1.12",
92-
"ts-jest": "29.2.3",
92+
"ts-jest": "29.2.4",
9393
"ts-loader": "9.5.1",
9494
"typescript": "5.5.4",
9595
"webpack": "5.93.0"

src/core/data-display/data-table/rows.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -81,8 +81,8 @@ const renderEditMode = <D extends Data>(
8181
decimalScale={decimalScale}
8282
value={numeric}
8383
name={column.field.toString()}
84-
onChange={event => {
85-
updateRow(column.field, event.target.value as D[keyof D])
84+
onValueChange={values => {
85+
updateRow(column.field, values.value as D[keyof D])
8686
}}
8787
/>
8888
)

src/core/inputs/mask-field/index.tsx

Lines changed: 42 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,61 @@
11
import React from 'react'
2-
import type { ComponentType } from 'react'
3-
import type { NumberFormatProps } from 'react-number-format'
4-
import NumberFormat from 'react-number-format'
2+
import type { ComponentType, SyntheticEvent } from 'react'
3+
import type { NumberFormatValues, SourceInfo } from 'react-number-format'
4+
import { NumericFormat, PatternFormat } from 'react-number-format'
55
import type { ITextFieldProps } from '@/core/inputs/text-field'
6+
import type { SourceType } from 'react-number-format/types/types'
67
import TextField from '@/core/inputs/text-field'
78

8-
export interface MaskFieldProps extends NumberFormatProps {
9-
mask?: string
9+
export interface MaskFieldProps extends Omit<ITextFieldProps, 'size'> {
10+
mask?: string | string[]
1011
type?: 'text' | 'tel' | 'password'
1112
decimalSeparator?: string
1213
format?: string
1314
decimalScale?: number
1415
thousandSeparator?: boolean | string
1516
fixedDecimalScale?: boolean
1617
customInput?: ComponentType<ITextFieldProps>
18+
hasFormat?: boolean
19+
onValueChange?: (values: NumberFormatValues, sourceInfo: SourceInfo) => void
20+
}
21+
22+
export interface IValues {
23+
value: string
24+
floatValue?: number
25+
formattedValue?: string
26+
}
27+
28+
export interface ISource {
29+
event?: SyntheticEvent<HTMLInputElement>
30+
source: SourceType
1731
}
1832

1933
const MaskField = (props: MaskFieldProps) => {
20-
const { customInput, ...otherProps } = props
34+
const {
35+
customInput,
36+
hasFormat,
37+
format = '######',
38+
style,
39+
...otherProps
40+
} = props
2141

2242
return (
23-
// Although react-number-format allow use of additional props,
24-
// shows problem with some props like have been do this
25-
// actually on flipper-ui. (e.g. errors treatment)
26-
<NumberFormat {...otherProps} customInput={customInput || TextField} />
43+
<>
44+
{hasFormat ? (
45+
<PatternFormat
46+
{...otherProps}
47+
format={format}
48+
style={{ ...style }}
49+
customInput={customInput || TextField}
50+
/>
51+
) : (
52+
<NumericFormat
53+
{...otherProps}
54+
style={{ ...style }}
55+
customInput={customInput || TextField}
56+
/>
57+
)}
58+
</>
2759
)
2860
}
2961

src/core/inputs/mask-field/mask-field.spec.tsx

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { act } from 'react'
22
import { render, screen } from '@testing-library/react'
33
import { userEvent } from '@testing-library/user-event'
4+
import { MaskFieldWrapper } from '@/test/mocks/mask-field'
45
import MaskField from '.'
56

67
describe('MaskField', () => {
@@ -16,6 +17,35 @@ describe('MaskField', () => {
1617
expect(input.value).toBe('123')
1718
})
1819

20+
it('should render with format', async () => {
21+
render(
22+
<MaskField hasFormat placeholder='Description' format='#####-##' />
23+
)
24+
25+
const input = screen.getByPlaceholderText(
26+
'Description'
27+
) as HTMLInputElement
28+
29+
await act(async () => await userEvent.type(input, '1234567'))
30+
31+
expect(input.value).toBe('12345-67')
32+
})
33+
34+
it('should render with thousand and decimal separators', async () => {
35+
render(<MaskFieldWrapper />)
36+
37+
const input = screen.getByPlaceholderText(
38+
'Description'
39+
) as HTMLInputElement
40+
41+
expect(input.value).toBe('1.234.567,89')
42+
43+
await act(async () => await userEvent.clear(input))
44+
await act(async () => await userEvent.type(input, '9876543,21'))
45+
46+
expect(input.value).toBe('9.876.543,21')
47+
})
48+
1949
it('should match snapshot', () => {
2050
const { container } = render(<MaskField placeholder='Description' />)
2151

src/core/inputs/text-field/index.tsx

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import MuiInputAdornment from '@mui/material/InputAdornment'
1313
import MuiMenuItem from '@mui/material/MenuItem'
1414
import MuiTextField from '@mui/material/TextField'
1515
import { makeStyles } from '@mui/styles'
16-
import { when, is, pipe, split, map, zipObj, reject, propEq } from 'ramda'
16+
import { pipe, split, map, reject } from 'ramda'
1717
import type { DefaultProps } from '../../types'
1818
import type { InputBaseComponentProps } from '@mui/material/InputBase'
1919
import type { TextFieldProps } from '@mui/material/TextField'
@@ -90,14 +90,13 @@ const useStyles = makeStyles({
9090
}
9191
})
9292

93-
const coerceComboOptions: (input: string) => IOption[] = when(
94-
is(String),
95-
pipe<string, string[], object, IOption[]>(
93+
const coerceComboOptions = (input: string): IOption[] => {
94+
return pipe(
9695
split(';'),
97-
map(pipe(split('='), zipObj(['value', 'label']))),
98-
reject(propEq('value', ''))
99-
)
100-
)
96+
map(pipe(split('='), ([value, label]) => ({ value, label }))),
97+
reject((option: IOption) => option.value === '')
98+
)(input)
99+
}
101100

102101
const toLispCase = (name: string) =>
103102
name

src/test/mocks/mask-field.tsx

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React, { useState } from 'react'
2+
import MaskField from '@/core/inputs/mask-field'
3+
4+
export const MaskFieldWrapper = () => {
5+
const [value, setValue] = useState<string>('1234567,89')
6+
7+
const handleChange = (value: string) => {
8+
setValue(value)
9+
}
10+
11+
return (
12+
<MaskField
13+
fixedDecimalScale
14+
value={value}
15+
decimalScale={2}
16+
decimalSeparator=','
17+
thousandSeparator='.'
18+
placeholder='Description'
19+
onValueChange={values => handleChange(values.value)}
20+
/>
21+
)
22+
}

0 commit comments

Comments
 (0)