Merge pull request #346 from nginformatica/feat/remove-emoji-from-textfield

feat/remove emoji from textfield

Author: KarineBrandelli

package.json

@@ -1,6 +1,6 @@
 {
     "name": "flipper-ui",
-    "version": "0.31.4",
+    "version": "0.31.5",
     "description": "",
     "main": "dist/index.js",
     "homepage": "https://flipper-ui.ngi.com.br/",

src/core/inputs/date-time/__snapshots__/date-time.spec.tsx.snap

@@ -14,7 +14,7 @@ exports[`DateTime should match snapshot 1`] = `
         class="MuiInputBase-input MuiOutlinedInput-input makeStyles-outlinedInput-49 MuiInputBase-inputAdornedEnd MuiOutlinedInput-inputAdornedEnd"
         role="date-picker"
         type="text"
-        value="15032024"
+        value="03042024"
       />
       <div
         class="MuiInputAdornment-root MuiInputAdornment-positionEnd"

src/core/inputs/text-field/__snapshots__/text-field.spec.tsx.snap

@@ -15,7 +15,7 @@ exports[`TextField should match snapshot 1`] = `
       >
         <div
           aria-haspopup="listbox"
-          class="MuiSelect-root MuiSelect-select MuiSelect-selectMenu MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input makeStyles-outlinedInput-100 MuiInputBase-inputAdornedEnd MuiOutlinedInput-inputAdornedEnd"
+          class="MuiSelect-root MuiSelect-select MuiSelect-selectMenu MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input makeStyles-outlinedInput-112 MuiInputBase-inputAdornedEnd MuiOutlinedInput-inputAdornedEnd"
           role="button"
           tabindex="0"
         >
@@ -31,7 +31,7 @@ exports[`TextField should match snapshot 1`] = `
         />
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSelect-icon MuiSelect-iconOutlined makeStyles-iconOutlined-104"
+          class="MuiSvgIcon-root MuiSelect-icon MuiSelect-iconOutlined makeStyles-iconOutlined-116"
           focusable="false"
           viewBox="0 0 24 24"
         >
@@ -71,11 +71,11 @@ exports[`TextField should match snapshot 1`] = `
         </div>
         <fieldset
           aria-hidden="true"
-          class="PrivateNotchedOutline-root-105 MuiOutlinedInput-notchedOutline"
+          class="PrivateNotchedOutline-root-117 MuiOutlinedInput-notchedOutline"
           style="padding-left: 8px;"
         >
           <legend
-            class="PrivateNotchedOutline-legend-106"
+            class="PrivateNotchedOutline-legend-118"
             style="width: 0.01px;"
           >
             <span>

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

@@ -221,6 +221,7 @@ export const TextField = ({
     fullWidth,
     hasClear,
     onClear,
+    onChange,
     characters,
     children,
     ...otherProps
@@ -233,16 +234,16 @@ export const TextField = ({
         }
     })
 
+    const classes = useStyles()
+    const clearClass = clearStyle()
+
     const hasValue = !!otherProps.value
 
     const endAdornment =
         hasValue && hasClear
             ? { endAdornment: renderEndAdornment(onClear) }
             : {}
 
-    const classes = useStyles()
-    const clearClass = clearStyle()
-
     const handleClick = () => {
         if (onHelperClick) {
             onHelperClick()
@@ -251,6 +252,25 @@ export const TextField = ({
 
     const Wrapper = hasClear ? StaticTextFieldWrapper : TextFieldWrapper
 
+    const emojiRegex =
+        /(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])/g
+
+    const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
+        if (onChange) {
+            const inputValue = event.target.value
+
+            if (emojiRegex.test(inputValue)) {
+                const newValue = inputValue.replace(emojiRegex, '')
+
+                event.target.value = newValue
+
+                return onChange(event)
+            }
+
+            return onChange(event)
+        }
+    }
+
     return (
         <Wrapper>
             <MuiTextField
@@ -295,6 +315,7 @@ export const TextField = ({
                     ...SelectProps
                 }}
                 characters={characters?.toString()}
+                onChange={handleInputChange}
                 {...otherProps}>
                 {options ? renderOptions(options, classes) : children}
             </MuiTextField>

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

@@ -153,6 +153,18 @@ describe('TextField', () => {
         })
     })
 
+    it('should remove emojis if typed', () => {
+        render(<TextField inputProps={{ placeholder: 'Description' }} />)
+
+        const inputElement = screen.getByPlaceholderText(
+            'Description'
+        ) as HTMLInputElement
+
+        fireEvent.change(inputElement, { target: { value: 'Hello World😀' } })
+
+        expect(inputElement.value).toBe('Hello World')
+    })
+
     it('should match snapshot', () => {
         const { container } = render(
             <TextField