From 0a2da365dab7a31e4e54caf91d21c9cc5627fda0 Mon Sep 17 00:00:00 2001
From: Matheus Wichman <matheushw@outlook.com>
Date: Fri, 7 Jan 2022 23:35:46 -0300
Subject: [PATCH] Make flags work on Windows

---
 .../src/renderer/renderCountry.tsx            | 36 ++++++++-----------
 .../src/renderer/renderEditCountry.tsx        | 24 ++++++-------
 .../src/renderer/renderEditCurrency.tsx       | 26 ++++++--------
 3 files changed, 36 insertions(+), 50 deletions(-)

diff --git a/packages/grid/x-data-grid-generator/src/renderer/renderCountry.tsx b/packages/grid/x-data-grid-generator/src/renderer/renderCountry.tsx
index da37aa50c2d0..35907ddbc518 100644
--- a/packages/grid/x-data-grid-generator/src/renderer/renderCountry.tsx
+++ b/packages/grid/x-data-grid-generator/src/renderer/renderCountry.tsx
@@ -2,16 +2,6 @@ import * as React from 'react';
 import Box from '@mui/material/Box';
 import { GridRenderCellParams } from '@mui/x-data-grid-pro';
 
-// ISO 3166-1 alpha-2
-// ⚠️ No support for IE 11
-function countryToFlag(isoCode: string) {
-  return typeof String.fromCodePoint !== 'undefined' && isoCode
-    ? isoCode
-        .toUpperCase()
-        .replace(/./g, (char) => String.fromCodePoint(char.charCodeAt(0) + 127397))
-    : isoCode;
-}
-
 interface CountryProps {
   value: {
     code: string;
@@ -23,18 +13,22 @@ const Country = React.memo(function Country(props: CountryProps) {
   const { value } = props;
 
   return (
-    <Box sx={{ display: 'flex', alignItems: 'center' }}>
-      <Box
-        component="span"
-        sx={{
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        '&  > img': {
           mr: '4px',
-          height: '32px',
-          width: '32px',
-          fontSize: '28px',
-        }}
-      >
-        {value.code && countryToFlag(value.code)}
-      </Box>
+          width: '20px',
+        },
+      }}
+    >
+      <img
+        loading="lazy"
+        src={`https://flagcdn.com/w20/${value.code.toLowerCase()}.png`}
+        srcSet={`https://flagcdn.com/w40/${value.code.toLowerCase()}.png 2x`}
+        alt=""
+      />
       <Box component="span" sx={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>
         {value.label}
       </Box>
diff --git a/packages/grid/x-data-grid-generator/src/renderer/renderEditCountry.tsx b/packages/grid/x-data-grid-generator/src/renderer/renderEditCountry.tsx
index cf5105c4e615..e58a9fb3a154 100644
--- a/packages/grid/x-data-grid-generator/src/renderer/renderEditCountry.tsx
+++ b/packages/grid/x-data-grid-generator/src/renderer/renderEditCountry.tsx
@@ -6,16 +6,6 @@ import Box from '@mui/material/Box';
 import { styled } from '@mui/material/styles';
 import { COUNTRY_ISO_OPTIONS } from '../services/static-data';
 
-// ISO 3166-1 alpha-2
-// ⚠️ No support for IE 11
-function countryToFlag(isoCode: string) {
-  return typeof String.fromCodePoint !== 'undefined'
-    ? isoCode
-        .toUpperCase()
-        .replace(/./g, (char) => String.fromCodePoint(char.charCodeAt(0) + 127397))
-    : isoCode;
-}
-
 const StyledAutocomplete = styled(Autocomplete)(({ theme }) => ({
   [`& .${autocompleteClasses.inputRoot}`]: {
     ...theme.typography.body2,
@@ -56,14 +46,20 @@ function EditCountry(props: GridRenderEditCellParams) {
         <Box
           component="li"
           sx={{
-            '& > span': {
-              mr: '10px',
-              fontSize: '18px',
+            '& > img': {
+              mr: 2,
+              flexShrink: 0,
             },
           }}
           {...optionProps}
         >
-          <span>{countryToFlag(option.code)}</span>
+          <img
+            loading="lazy"
+            width="20"
+            src={`https://flagcdn.com/w20/${option.code.toLowerCase()}.png`}
+            srcSet={`https://flagcdn.com/w40/${option.code.toLowerCase()}.png 2x`}
+            alt=""
+          />
           {option.label}
         </Box>
       )}
diff --git a/packages/grid/x-data-grid-generator/src/renderer/renderEditCurrency.tsx b/packages/grid/x-data-grid-generator/src/renderer/renderEditCurrency.tsx
index 134323b25806..644139948a78 100644
--- a/packages/grid/x-data-grid-generator/src/renderer/renderEditCurrency.tsx
+++ b/packages/grid/x-data-grid-generator/src/renderer/renderEditCurrency.tsx
@@ -6,16 +6,6 @@ import Box from '@mui/material/Box';
 import { styled } from '@mui/material/styles';
 import { CURRENCY_OPTIONS } from '../services/static-data';
 
-// ISO 3166-1 alpha-2
-// ⚠️ No support for IE 11
-function countryToFlag(isoCode: string) {
-  return typeof String.fromCodePoint !== 'undefined'
-    ? isoCode
-        .toUpperCase()
-        .replace(/./g, (char) => String.fromCodePoint(char.charCodeAt(0) + 127397))
-    : isoCode;
-}
-
 const StyledAutocomplete = styled(Autocomplete)(({ theme }) => ({
   [`& .${autocompleteClasses.inputRoot}`]: {
     ...theme.typography.body2,
@@ -51,18 +41,24 @@ function EditCurrency(props: GridRenderEditCellParams) {
       fullWidth
       open
       disableClearable
-      renderOption={(optionProps, option) => (
+      renderOption={(optionProps, option: any) => (
         <Box
           component="li"
           sx={{
-            '& > span': {
-              mr: '10px',
-              fontSize: '18px',
+            '& > img': {
+              mr: 2,
+              flexShrink: 0,
             },
           }}
           {...optionProps}
         >
-          <span>{countryToFlag(String(option).slice(0, -1))}</span>
+          <img
+            loading="lazy"
+            width="20"
+            src={`https://flagcdn.com/w20/${option.slice(0, -1).toLowerCase()}.png`}
+            srcSet={`https://flagcdn.com/w40/${option.slice(0, -1).toLowerCase()}.png 2x`}
+            alt=""
+          />
           {option}
         </Box>
       )}