-
Notifications
You must be signed in to change notification settings - Fork 78
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added icon for button in adapter-react-v5 (#2812)
- Loading branch information
1 parent
07ab9e8
commit 968daac
Showing
39 changed files
with
9,864 additions
and
1,090 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| # Migration from adapter-react to adapter-react-v5 | ||
|
|
||
| ## In src/package.json => dependencies | ||
|
|
||
| - `"@iobroker/adapter-react": "^2.0.22",` => `"@iobroker/adapter-react-v5": "^3.1.34",` | ||
| - `"@material-ui/core": "^4.12.3",` => `"@mui/material": "^5.10.9",` | ||
| - `"@material-ui/icons": "^4.11.2",` => `"@mui/icons-material": "^5.10.9",` | ||
| - Add `"@mui/styles": "^5.10.9",` | ||
| - Add `"babel-eslint": "^10.1.0",` | ||
|
|
||
| ## In Source files | ||
|
|
||
| - All `@iobroker/adapter-react/...` => `@iobroker/adapter-react-v5/...` | ||
| - All `@material-ui/icons/...` => `@mui/icons-material/...` | ||
| - Change `import { withStyles } from '@material-ui/core/styles';` => `import { withStyles } from '@mui/styles';` | ||
| - Change `import { makeStyles } from '@mui/material/styles';` => `import { makeStyles } from '@mui/styles';` | ||
| - Change `import withWidth from '@material-ui/core/withWidth';` => `import { withWidth } from '@iobroker/adapter-react-v5';` | ||
| - All `@material-ui/core...` => `@mui/material...` | ||
| - Change `import { MuiThemeProvider } from '@material-ui/core/styles';` => `import { ThemeProvider, StyledEngineProvider } from '@mui/material/styles';` | ||
| - Change all `<MuiThemeProvider theme={this.state.theme}>` to `<StyledEngineProvider injectFirst><ThemeProvider theme={this.state.theme}>` | ||
| - Rename in styles `theme.palette.type` => `theme.palette.mode` | ||
| - Add to all `TextField`, `Select`, `FormControl` the property `variant="standard"` | ||
| - Add to all `Button` that do not have `color` property: `color="grey"` | ||
| - Replace by `TextField` the `readOnly` attribute (if exists) with `InputProps={{readOnly: true}}` | ||
| - Remove px by all `theme.spacing`: `calc(100% - ${theme.spacing(4)}px)` => `calc(100% - ${theme.spacing(4)})` | ||
| - Replace `this.selectTab(e.target.parentNode.dataset.name, index)` => `this.selectTab(e.target.dataset.name, index)` | ||
|
|
||
| If you still have questions, try to find an answer [here](https://mui.com/guides/migration-v4/). | ||
|
|
||
| # Migration from [email protected] to [email protected] | ||
|
|
||
| - Look for getObjectView socket requests and replace `socket.getObjectView('startKey', 'endKey', 'instance')` to `socket.getObjectViewSystem('instance', 'startKey', 'endKey')` | ||
| - Look for calls of custom like | ||
|
|
||
| ```jsx | ||
| this.props.socket._socket.emit('getObjectView', 'system', 'custom', { startKey: '', endKey: '\u9999' }, (err, objs) => { | ||
| (objs?.rows || []).forEach(item => console.log(item.id, item.value)); | ||
| }); | ||
| ``` | ||
| to | ||
| ```jsx | ||
| socket.getObjectViewCustom('custom', 'state', 'startKey', 'endKey').then(objects => { | ||
| Object.keys(objects).forEach(obj => console.log(obj._id)); | ||
| }); | ||
| ``` | ||
| - Replace all `socket.log.error('text')` to `socket.log('text', 'error')` | ||
| - Add to App.js `import { AdminConnection } from '@iobroker/adapter-react-v5';` and `super(props, { Connection: AdminConnection });` if run in admin | ||
| # Migration from [email protected] to [email protected] | ||
| - `Theme` is renamed to IobTheme. It is an object with classes inside. `Theme` is still inside and it same as mui `createTheme`. | ||
| - adapter-react-v5 has all types exported. So you can use `import { type IobTheme, Theme } from '@iobroker/adapter-react-v5';` and `const theme: IobTheme = Theme('light');` | ||
| - Json-Config is now an external package and must be included as dependency separately. | ||
| - Use type `Translate` for `t(word: string, ...args: any[]) => string` | ||
| - All components for admin JsonConfig must be changed: | ||
| Before `adapter-react-v5@5.x`: | ||
| ```jsx | ||
| import { ConfigGeneric, I18n } from '@iobroker/adapter-react-v5'; | ||
| class JsonComponent extends ConfigGeneric { | ||
| // ... | ||
| } | ||
| ``` | ||
| With `adapter-react-v5@5.x`: | ||
| ```jsx | ||
| import { I18n } from '@iobroker/adapter-react-v5'; | ||
| import { ConfigGeneric } from '@iobroker/json-config'; | ||
| class JsonComponent extends ConfigGeneric { | ||
| // ... | ||
| } | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,90 @@ | ||
| # Migration from v5 to v6 | ||
|
|
||
| The main change is that the `withStyles` was removed. So you have to replace all `withStyles` with `sx` or `style` properties. | ||
|
|
||
| You can read more about sx [here](https://mui.com/system/getting-started/the-sx-prop/). | ||
|
|
||
| - Remove at start of the file `import { withStyles } from '@mui/styles';` | ||
| - Replace it at the very end of the file `export default withStyles(styles)(MyComponent);` with `export default MyComponent;` | ||
| - Modify `const styles`: | ||
| Before: | ||
|
|
||
| ```typescript jsx | ||
| const styles: Record<string, any> = (theme: IobTheme) => ({ | ||
| dialog: { | ||
| height: `calc(100% - ${theme.mixins.toolbar.minHeight}px)`, | ||
| padding: theme.spacing(1), | ||
| margin: theme.spacing(2), | ||
| gap: 5, | ||
| borderRadius: 5, | ||
| marginLeft: 10, // marginTop, marginRight, marginBottom | ||
| paddingLeft: 10, // paddingTop, paddingRight, paddingBottom | ||
| }, | ||
| ... | ||
| }); | ||
| ``` | ||
|
|
||
| After: | ||
|
|
||
| ```typescript jsx | ||
| const styles: Record<string, any> = { | ||
| dialog: (theme: IobTheme) => ({ | ||
| height: `calc(100% - ${theme => theme.mixins.toolbar.minHeight}px)`, | ||
| p: 1, // or 8px, padding is OK too | ||
| m: '16px', // or 2, margin is OK too | ||
| gap: '5px', | ||
| borderRadius: '5px', | ||
| ml: '10px', // mt, mr, mb, but marginLeft, marginRight, marginBottom is OK too | ||
| pl: '10px', // pt, pr, pb, but paddingTop, paddingRight, paddingBottom is OK too | ||
| }), | ||
| }; | ||
| ``` | ||
|
|
||
| - Modify `className`: | ||
| Before: `<div className={this.props.classes.box}>` | ||
|
|
||
| After: `<Box sx={styles.box}>` | ||
|
|
||
| Before: `<span className={Utils.clsx(this.props.classes.box1, condition && this.props.classes.box2)}>` | ||
|
|
||
| After: `<Box component="span" sx={Utils.getStyle(this.props.theme, this.props.classes.box1, condition && this.props.classes.box2)}>` | ||
| Or if no one style is a function: `<Box component="div" sx={{ ...this.props.classes.box1, ...(condition ? this.props.classes.box2 : undefined) }}>` | ||
|
|
||
| Do not use `sx` if the style is not dynamic (not a function). Use `style` instead. | ||
|
|
||
| Be aware, that all paddings and margins are now in `theme.spacing(1)` format. | ||
| So you have to replace all `padding: 8` with `padding: 1` or with `padding: '8px'`. | ||
|
|
||
| The best practice is to replace `padding` with `p` and `margin` with `m`, so you will see immediately that it is a padding or margin for `sx` property. | ||
|
|
||
| - Modify `classes`: | ||
| Before: `<Dialog classes={{ scrollPaper: this.props.classes.dialog, paper: this.props.classes.paper }}>` | ||
| After: `<Dialog sx={{ '&.MuiDialog-scrollPaper': styles.dialog, '& .MuiDialog-paper': styles.paper }}>`, | ||
|
|
||
| Before: `<Dialog classes={{ scrollPaper: this.props.classes.dialog, paper: this.props.classes.paper }}>` | ||
| After: `<Dialog sx={{ '&.MuiDialog-scrollPaper': styles.dialog, '& .MuiDialog-paper': styles.paper }}>` | ||
|
|
||
| Before: `<ListItem classes={{ root: this.props.classes.listItem }} >`, | ||
| After: `<ListItem sx={{ '&.MuiListItem-root': styles.listItem }} >` | ||
|
|
||
| Before: `<Typography component="h2" variant="h6" classes={{ root: this.props.classes.typography }}>`, | ||
| After: `<Typography component="h2" variant="h6" sx={{ '&.MuiTypography-root': styles.typography }}>` | ||
|
|
||
| Before: `<Badge classes={{ 'badge': this.props.classes.expertBadge }}>`, | ||
| After: `<Badge sx={{ '& .MuiBadge-badge': styles.expertBadge }}>` | ||
|
|
||
| Before: `<Tab classes={{ selected: this.props.classes..selected }} />`, | ||
| After: `<Tab sx={{ '&.Mui-selected': styles.selected }} />` | ||
|
|
||
| Before: `<Tabs classes={{ indicator: this.props.classes.indicator }} />`, | ||
| After: `<Tabs sx={{ '& .MuiTabs-indicator': styles.indicator }} />` | ||
|
|
||
| Before: `<Tooltip title={this.props.t('ra_Refresh tree')} classes={{ popper: this.props.classes.tooltip }}>`, | ||
| After: `<Tooltip title={this.props.t('ra_Refresh tree')} componentsProps={{ popper: { sx: { pointerEvents: 'none' } } }}>`, | ||
| Or: `<Tooltip title={this.props.t('ra_Refresh tree')} componentsProps={{ popper: { sx: styles.tooltip } }}>` | ||
|
|
||
| Before. `<AccordionSummary classes={{ root: this.props.classes.rootStyle, content: this.props.classes.content }}>`, | ||
| After. `<AccordionSummary sx={{ '&.MuiAccordionSummary-root': styles.rootStyle, '& .MuiAccordionSummary-content': styles.content }}>` | ||
|
|
||
| Before. `<Drawer classes={{ paper: this.props.classes.paperStyle }}>`, | ||
| After. `<Drawer sx={{ '& .MuiDrawer-paper': styles.paperStyle }}>` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| # Migration from [email protected] to [email protected] | ||
|
|
||
| Only MUI library was updated from v5 to v6. | ||
|
|
||
| ## No `withStyles` at all | ||
|
|
||
| `withStyles` was removed completely. So you have to replace all `withStyles` with `sx` or `style` properties. | ||
|
|
||
| ## slotProps | ||
|
|
||
| `inputProps` and `InputProps` are now in `slotProps` | ||
|
|
||
| Examples: | ||
| Before: | ||
|
|
||
| ```jsx | ||
| <TextField | ||
| inputProps={{ readOnly: true }} | ||
| InputProps={{ endAdornment: <IconButton /> }} | ||
| /> | ||
| ``` | ||
|
|
||
| ```jsx | ||
| <TextField | ||
| slotProps={{ | ||
| htmlInput: { | ||
| readOnly: true, | ||
| }, | ||
| input: { | ||
| endAdornment: <IconButton />, | ||
| }, | ||
| }} | ||
| /> | ||
| ``` | ||
|
|
||
| ## SelectID dialog | ||
|
|
||
| `SelectID` dialog now requires `theme` property. Without this property, the dialog will crash. | ||
|
|
||
| ## Grid => Grid2 | ||
|
|
||
| Replace all `Grid` with `Grid2` component and remove `item` property as it not needed anymore. | ||
|
|
||
| Attributes xs, sm, md, lg, xl are now in `size` property. | ||
|
|
||
| Before: | ||
|
|
||
| ```jsx | ||
| <Grid item xs={6} sm={4} md={3}> | ||
| <Grid/> | ||
| ``` | ||
|
|
||
| ```jsx | ||
| <Grid2 size={{ xs: 6, sm: 4, md: 3 }}> | ||
| <Grid2/> | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.