Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[docs] Replace @mui/styles in x-data-grid-generator #3560

Merged
merged 11 commits into from
Jan 19, 2022
Merged

[docs] Replace @mui/styles in x-data-grid-generator #3560

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
c0e5abc
[docs] Replace @mui/styles in x-data-grid-generator
m4theushw Jan 7, 2022
0a2da36
Make flags work on Windows
m4theushw Jan 8, 2022
13a2506
Merge branch 'master' into replace-mui-styles
m4theushw Jan 17, 2022
712ae0f
Expand to full width
m4theushw Jan 17, 2022
c5dfc1c
Remove contract type editor
m4theushw Jan 17, 2022
1420d76
Make Autocomplete to extend cell height
m4theushw Jan 17, 2022
f0ad99d
Update Select items minWidth
m4theushw Jan 17, 2022
f54fcff
Merge branch 'master' into replace-mui-styles
m4theushw Jan 17, 2022
5dd734b
Don't block flags images
m4theushw Jan 17, 2022
8830353
Merge branch 'master' into replace-mui-styles
m4theushw Jan 19, 2022
a50d851
fix types
m4theushw Jan 19, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 0 additions & 1 deletion docs/pages/_app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,6 @@ ponyfillGlobal.muiDocConfig = {
newDeps['@mui/material'] = versions['@mui/material'];
newDeps['@mui/icons-material'] = versions['@mui/icons-material'];
newDeps['@mui/x-data-grid'] = versions['@mui/x-data-grid']; // TS types are imported from @mui/x-data-grid
newDeps['@mui/styles'] = versions['@mui/styles'];
}

return newDeps;
Expand Down
55 changes: 22 additions & 33 deletions packages/grid/x-data-grid-generator/src/renderer/renderCountry.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,34 +1,7 @@
import * as React from 'react';
import { makeStyles } from '@mui/styles';
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;
}

const useStyles = makeStyles({
root: {
display: 'flex',
},
flag: {
marginRight: 4,
marginTop: 2,
height: 32,
width: 32,
fontSize: '28px',
},
label: {
overflow: 'hidden',
textOverflow: 'ellipsis',
},
});

interface CountryProps {
value: {
code: string;
Expand All @@ -38,13 +11,29 @@ interface CountryProps {

const Country = React.memo(function Country(props: CountryProps) {
const { value } = props;
const classes = useStyles();

return (
<div className={classes.root}>
<span className={classes.flag}>{value.code && countryToFlag(value.code)}</span>
<span className={classes.label}>{value.label}</span>
</div>
<Box
sx={{
width: 1,
display: 'flex',
alignItems: 'center',
'& > img': {
mr: '4px',
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' }}>
m4theushw marked this conversation as resolved.
Show resolved Hide resolved
{value.label}
</Box>
</Box>
);
});

Expand Down
80 changes: 0 additions & 80 deletions packages/grid/x-data-grid-generator/src/renderer/renderEditContractType.tsx
View file
Open in desktop

This file was deleted.

79 changes: 36 additions & 43 deletions packages/grid/x-data-grid-generator/src/renderer/renderEditCountry.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,46 +1,25 @@
import * as React from 'react';
import { GridRenderEditCellParams } from '@mui/x-data-grid';
import Autocomplete from '@mui/material/Autocomplete';
import Autocomplete, { autocompleteClasses } from '@mui/material/Autocomplete';
import InputBase from '@mui/material/InputBase';
import { createStyles, makeStyles } from '@mui/styles';
import { createTheme } from '@mui/material/styles';
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 defaultTheme = createTheme();
const useStyles = makeStyles(
(theme) =>
createStyles({
option: {
'& > span': {
marginRight: 10,
fontSize: 18,
},
},
inputRoot: {
...theme.typography.body2,
padding: '1px 0',
height: '100%',
'& input': {
padding: '0 16px',
height: '100%',
},
},
}),
{ defaultTheme },
);
const StyledAutocomplete = styled(Autocomplete)(({ theme }) => ({
height: '100%',
[`& .${autocompleteClasses.inputRoot}`]: {
...theme.typography.body2,
padding: '1px 0',
height: '100%',
'& input': {
padding: '0 16px',
height: '100%',
},
},
}));

function EditCountry(props: GridRenderEditCellParams) {
const classes = useStyles();
const { id, value, api, field } = props;

const handleChange = React.useCallback(
Expand All @@ -55,21 +34,35 @@ function EditCountry(props: GridRenderEditCellParams) {
);

return (
<Autocomplete
<StyledAutocomplete
value={value as any}
onChange={handleChange}
options={COUNTRY_ISO_OPTIONS}
getOptionLabel={(option) => option.label}
getOptionLabel={(option: any) => option.label}
autoHighlight
fullWidth
open
classes={classes}
disableClearable
renderOption={(optionProps, option) => (
<li {...optionProps}>
<span>{countryToFlag(option.code)}</span>
renderOption={(optionProps, option: any) => (
<Box
component="li"
sx={{
'& > img': {
mr: 2,
flexShrink: 0,
},
}}
{...optionProps}
>
<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}
</li>
</Box>
)}
renderInput={(params) => (
<InputBase
Expand Down
77 changes: 35 additions & 42 deletions packages/grid/x-data-grid-generator/src/renderer/renderEditCurrency.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,46 +1,25 @@
import * as React from 'react';
import { GridRenderEditCellParams } from '@mui/x-data-grid';
import Autocomplete from '@mui/material/Autocomplete';
import Autocomplete, { autocompleteClasses } from '@mui/material/Autocomplete';
import InputBase from '@mui/material/InputBase';
import { createStyles, makeStyles } from '@mui/styles';
import { createTheme } from '@mui/material/styles';
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 defaultTheme = createTheme();
const useStyles = makeStyles(
(theme) =>
createStyles({
option: {
'& > span': {
marginRight: 10,
fontSize: 18,
},
},
inputRoot: {
...theme.typography.body2,
padding: '1px 0',
height: '100%',
'& input': {
padding: '0 16px',
height: '100%',
},
},
}),
{ defaultTheme },
);
const StyledAutocomplete = styled(Autocomplete)(({ theme }) => ({
height: '100%',
[`& .${autocompleteClasses.inputRoot}`]: {
...theme.typography.body2,
padding: '1px 0',
height: '100%',
'& input': {
padding: '0 16px',
height: '100%',
},
},
}));

function EditCurrency(props: GridRenderEditCellParams) {
const classes = useStyles();
const { id, value, api, field } = props;

const handleChange = React.useCallback(
Expand All @@ -55,20 +34,34 @@ function EditCurrency(props: GridRenderEditCellParams) {
);

return (
<Autocomplete
<StyledAutocomplete
value={value as string}
onChange={handleChange}
options={CURRENCY_OPTIONS}
autoHighlight
fullWidth
open
classes={classes}
disableClearable
renderOption={(optionProps, option) => (
<li {...optionProps}>
<span>{countryToFlag(String(option).slice(0, -1))}</span>
renderOption={(optionProps, option: any) => (
<Box
component="li"
sx={{
'& > img': {
mr: 2,
flexShrink: 0,
},
}}
{...optionProps}
>
<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}
</li>
</Box>
)}
renderInput={(params) => (
<InputBase
Expand Down