MaterialUI-Upgrade.md

Buttons

- import RaisedButton from 'material-ui/RiasedButton';
+ import Button from '@material-ui/core/Button';
- import ArrowBack from 'material-ui/svg-icons/navigation/arrow-back';
+ import ArrowBack from '@material-ui/icons/ArrowBack';
import { Link } from 'react-router-dom';

+ const styles = theme => ({
+   button: {
+     margin: theme.spacing.unit,
+   },
+   leftIcon: {
+     marginRight: theme.spacing.unit,
+   },
+ });

-  <RaisedButton
-    primary
-    label="Back"
-    icon={<ArrowBack />}
-    containerElement={<Link to={basePath} />}
-  />
+ const NewButton = ({classes}) => (
+   <Button
+     className={classes.button}
+     component={Link}
+     color='primary'
+     to={basePath}
+     variant='raised'
+   >
+     <ArrowBack className={classes.leftIcon} />
+     Back
+   </Button>
+ )

+ export default withStyles(styles)(NewButton);

Checkbox

-import Checkbox from 'material-ui/Checkbox';
-import CheckedIcon from 'material-ui/svg-icons/toggle/radio-button-checked';
-import UncheckedIcon from 'material-ui/svg-icons/toggle/radio-button-unchecked';
+import Checkbox from '@material-ui/core/Checkbox';
+import CheckedIcon from '@material-ui/icons/RadioButtonChecked';
+import UncheckedIcon from '@material-ui/icons/RadioButtonUnchecked';

<Checkbox
    checkedIcon={<CheckedIcon />}
-   uncheckedIcon={<UncheckedIcon />}
+   icon={<UncheckedIcon />}
    checked={this.isChecked}
-   onCheck={this.handleToggle}
+   onChange={this.handleToggle}
    disabled={this.isDisabled}
/>

Toggle

-import Toggle from 'material-ui/Toggle';
+import Switch from '@material-ui/core/Switch';

-    <Toggle
+    <Switch
         {...options}
-        toggled={input.value}
-        onToggle={(e, isInputChecked) => input.handleChange(isInputChecked)}
+        checked={input.value}
+        onChange={(e, isInputChecked) => input.handleChange(isInputChecked)}
     />

Dialog

-import Dialog from 'material-ui/Dialog';
+import Dialog from '@material-ui/core/Dialog';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogActions from '@material-ui/core/DialogActions';

- const actions = [
-     <Button
-         color='primary'
-         onClick={this.handleClose}
-     >
-         Cancel
-     </Button>,
- ];

<Dialog
      title="Original Document"
-     actions={actions}
-     modal
+     aria-labelledby="dialog-title"
+     disableBackdropClick
+     disableEscapeKeyDown
      open={this.state.open}
-     onRequestClose={this.handleClose}
-     autoScrollBodyContent={true}
+     onClose={this.handleClose}
>
-     {targetRecord !== null ? this.content : null}
+     <DialogTitle id="dialog-title">Original Document</DialogTitle>
+     <DialogContent>
+         {targetRecord !== null ? this.content : null}
+     </DialogContent>
+     <DialogActions>
+         <Button
+             color='primary'
+             onClick={this.handleClose}
+         >
+             Cancel
+         </Button>
+     </DialogActions>
</Dialog>

Select

-import SelectField from 'material-ui/SelectField';
-import MenuItem from 'material-ui/MenuItem';
+import Select from '@material-ui/core/Select';
+import MenuItem from '@material-ui/core/MenuItem';
+import Checkbox from '@material-ui/core/Checkbox';
+import ListItemText from '@material-ui/core/ListItemText';

+import isEmpty from 'lodash/isEmpty';
+import keyBy from 'lodash/keyBy';

class SelectInputComponent extends React.Component {
-    handleChange = (e, key, value) => {
+    handleChange = ({ target: { value } }) => {
         this.setState({ value })
     };

+    // earlier selected menuItems were passed too as the second argument but not they doesn't so it becomes difficult to
+    // extract the displayed texts of the menuItems
+    renderValue = (value) => {
+        const { data, optionValue, optionText, options } = this.props;
+
+        if (isEmpty(data)) {
+            return null;
+        }
+
+        const kData = keyBy(Object.values(data), optionValue);
+
+        if (options.renderValue) {
+            return options.renderValue(value, kData);
+        }
+
+        if (options.multiple) {
+            return value.map(v => kData[v][optionText]).join(', ');
+        }
+
+        if (value === "") {
+            return 'None';
+        }
+
+        return kData[value][optionText];
+    };
+

     get choices() {
         const { allowEmpty, data, optionValue, optionText, options } = this.props;
         const { value: selectedValues } = this.state;
         const choices = [];
 
         if (allowEmpty) {
-            choices.push(<MenuItem value={null} key="null" primaryText="None" />);
+            choices.push(<MenuItem value="" key="null"><em>None</em></MenuItem>);
         }
 
         for (const [key, value] of Object.entries(data)) {
             const menuProps = {
                 key,
                 value: value[optionValue],
-                primaryText: value[optionText], // primaryText is removed
+                children: []
             };
             const isSelected = selectedValues && selectedValues.indexOf(value[optionValue]) > -1;
 
             if (options.multiple) {
-                menuProps.insetChildren = true;
-                menuProps.checked = isSelected;
+                menuProps.children.push(<Checkbox checked={isSelected} />); // checkbox is to be added manually
+            } else {
+                menuProps.selected = isSelected;
             }
 
+            menuProps.children.push(<ListItemText primary={value[optionText]} />); // for proper checkbox display
             choices.push(<MenuItem {...menuProps} />);
         }
     }

     render() {
         const { options } = this.props;
+        const { value } = this.state;
 
         return (
-            <SelectField
+            <Select
                 {...options}
-                value={this.state.value}
+                value={value !== null ? value : (options.multiple ? [] : "")} // for the reason null is not accepted
                 onChange={this.handleChange}
-                dropDownMenuProps={{
-                    onClose: this.handleDropDownClose,
-                }}
+                onClose={this.handleClose}
-                selectionRenderer={this.renderValue}
+                renderValue={this.renderValue} // since we are using LitItemText component, not needed in direct string
                 autoWidth
+                displayEmpty  // otherwise the renderValue won't work in case where the value doesn't exist
             >
                 {this.choices}
-            </SelectField>
+            </Select>
         );
     }
}

ExpandTransition

-import ExpandTransition from 'material-ui/internal/ExpandTransition';
+import Collapse from '@material-ui/core/Collapse';
-<ExpandTransition loading={props.loading} open>
+<Collapse in={!props.loading} unmountOnExit> // unmountOnExit is required if the child component changes

Stepper

-import {Step, StepLabel, Stepper, StepButton} from 'material-ui/Stepper';
+import Stepper from '@material-ui/core/Stepper';
+import Step from '@material-ui/core/Step';
+import StepLabel from '@material-ui/core/StepLabel';
+import StepButton from '@material-ui/core/StepButton';

+ const styles = {
+     stepper: {
+         backgroundColor: 'transparent',
+     },
+ };

- <Stepper activeStep={props.stepIndex}>
+ <Stepper activeStep={props.stepIndex} className={classes.stepper} >

Tabs

-import {Tabs, Tab} from 'material-ui/Tabs';
+import Tabs from '@material-ui/core/Tabs';
+import Tab from '@material-ui/core/Tab';
+import AppBar from '@material-ui/core/AppBar';
+import {withStyles} from '@material-ui/core/styles';

-    handleChange = (value) => {
+    handleChange = (event, value) => {

+    const { classes } = this.props;

-                <Tabs value={this.value} onChange={this.handleChange}>
-                </Tabs>
+                <AppBar position="static">
+                    <Tabs value={this.value} onChange={this.handleChange} className={classes.root}>
+                    </Tabs>
+                </AppBar>


+const styles = theme => ({
+    root: {
+        backgroundColor: theme.palette.primary1Color,
+    },
+});