fix(migration ra-ui-2.8.5): updated ra-ui-maui and migrated auth/ and…

… button/

package.json

@@ -227,6 +227,7 @@
     "@babel/preset-env": "^7.4.2",
     "@babel/preset-react": "^7.0.0",
     "@bootstrap-styled/documentation": "^2.0.0",
+    "@bootstrap-styled/color": "^1.0.9",
     "@rollup-umd/documentation": "^2.0.1",
     "@rollup-umd/ncu": "^1.0.9",
     "@rollup-umd/rollup": "^1.0.10",
@@ -262,7 +263,7 @@
     "lint-staged": "^8.1.5",
     "lodash": "^4.17.11",
     "pre-commit": "^1.2.2",
-    "ra-core": "2.6.4",
+    "ra-core": "2.8.5",
     "raf": "^3.4.1",
     "react": "^16.8.3",
     "react-dom": "^16.8.3",
@@ -306,7 +307,7 @@
   "peerDependencies": {
     "react": "^16.8.5",
     "react-dom": "^16.8.5",
-    "ra-core": "^2.6.4",
+    "ra-core": "^2.8.5",
     "redux-form": "~7.4.0",
     "styled-components": "^4.1.3",
     "redux": "~3.7.2",

src/components/auth/LoginForm.js

@@ -17,7 +17,7 @@ import { translate, userLogin } from 'ra-core';
 
 // see http://redux-form.com/6.4.3/examples/material-ui/
 const renderInput = ({
-  meta: { touched, error } = {}, // eslint-disable-line react/prop-types
+  meta: { touched, error } = { touched: false, error: '' }, // eslint-disable-line react/prop-types
   input: { ...inputProps }, // eslint-disable-line react/prop-types
   ...props
 }) => (

src/components/button/BulkDeleteButton.js

@@ -1,100 +1,28 @@
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import compose from 'recompose/compose';
-import ActionDelete from '@material-ui/icons/Delete';
-import { crudDeleteMany, startUndoable } from 'ra-core';
-
-import Button from './Button';
-
-const sanitizeRestProps = ({
-  basePath,
-  dispatchCrudDeleteMany,
-  filterValues,
-  label,
-  resource,
-  selectedIds,
-  startUndoable,
-  undoable,
-  ...rest
-}) => rest;
-
-// const styles = theme => ({
-//     deleteButton: {
-//         color: theme.palette.error.main,
-//         '&:hover': {
-//             backgroundColor: fade(theme.palette.error.main, 0.12),
-//             // Reset on mouse devices
-//             '@media (hover: none)': {
-//                 backgroundColor: 'transparent',
-//             },
-//         },
-//     },
-// });
-
-class BulkDeleteButton extends Component {
-    static propTypes = {
-      basePath: PropTypes.string,
-      dispatchCrudDeleteMany: PropTypes.func.isRequired,
-      label: PropTypes.string,
-      resource: PropTypes.string.isRequired,
-      startUndoable: PropTypes.func,
-      selectedIds: PropTypes.arrayOf(PropTypes.any).isRequired,
-      undoable: PropTypes.bool,
-      icon: PropTypes.element,
-    };
-
-    static defaultProps = {
-      label: 'ra.action.delete',
-      undoable: true,
-      icon: <ActionDelete />,
-    };
-
-    handleClick = () => {
-      const {
-        basePath,
-        dispatchCrudDeleteMany,
-        resource,
-        selectedIds,
-        startUndoable,
-        undoable,
-        onClick,
-      } = this.props;
-      if (undoable) {
-        startUndoable(crudDeleteMany(resource, selectedIds, basePath));
-      } else {
-        dispatchCrudDeleteMany(resource, selectedIds, basePath);
-      }
-
-      if (typeof onClick === 'function') {
-        onClick();
-      }
-    };
-
-    render() {
-      const {
-        label, icon, ...rest
-      } = this.props;
-      return (
-        <Button
-          onClick={this.handleClick}
-          label={label}
-          {...sanitizeRestProps(rest)}
-        >
-          {icon}
-        </Button>
-      );
-    }
-}
-
-const EnhancedBulkDeleteButton = compose(
-  connect(
-    undefined,
-    {
-      startUndoable,
-      dispatchCrudDeleteMany: crudDeleteMany,
-    }
-  ),
-)(BulkDeleteButton);
-
-export default EnhancedBulkDeleteButton;
+import BulkDeleteWithConfirmButton from './BulkDeleteWithConfirmButton';
+import BulkDeleteWithUndoButton from './BulkDeleteWithUndoButton';
+
+import Button from './Button'; // eslint-disable-line
+
+const BulkDeleteButton = ({ undoable, ...props }) => undoable ? (
+  <BulkDeleteWithUndoButton {...props} />
+) : (
+  <BulkDeleteWithConfirmButton {...props} />
+);
+
+BulkDeleteButton.propTypes = {
+  basePath: PropTypes.string,
+  label: PropTypes.string,
+  resource: PropTypes.string.isRequired,
+  selectedIds: PropTypes.arrayOf(PropTypes.any).isRequired,
+  undoable: PropTypes.bool,
+  icon: PropTypes.element,
+};
+
+BulkDeleteButton.defaultProps = {
+  undoable: true,
+};
+
+/** @component */
+export default BulkDeleteButton;

src/components/button/BulkDeleteWithConfirmButton.js

@@ -0,0 +1,127 @@
+import React, { Fragment, Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import compose from 'recompose/compose';
+import ActionDelete from '@material-ui/icons/Delete';
+import inflection from 'inflection';
+import { translate, crudDeleteMany } from 'ra-core';
+import styled from 'styled-components';
+import Color from '@bootstrap-styled/color';
+import Confirm from '../layout/Confirm';
+import Button from './Button';
+
+const sanitizeRestProps = ({
+  basePath,
+  crudDeleteMany,
+  filterValues,
+  label,
+  resource,
+  selectedIds,
+  ...rest
+}) => rest;
+
+const StyledButton = styled(Button)`
+  ${props => `
+    color: ${props.theme.$red} 
+    &:hover {
+      background-color: ${Color(props.theme.$red.fade(0.12).toString())}
+    }
+  `}
+`;
+
+class BulkDeleteWithConfirmButton extends Component {
+  static propTypes = {
+    basePath: PropTypes.string,
+    crudDeleteMany: PropTypes.func.isRequired,
+    label: PropTypes.string,
+    resource: PropTypes.string.isRequired,
+    selectedIds: PropTypes.arrayOf(PropTypes.any).isRequired,
+    icon: PropTypes.element,
+  };
+
+  static defaultProps = {
+    label: 'ra.action.delete',
+    icon: <ActionDelete />,
+  };
+
+  state = { isOpen: false };
+
+  handleClick = e => {
+    this.setState({ isOpen: true });
+    e.stopPropagation();
+  };
+
+  handleDialogClose = () => {
+    this.setState({ isOpen: false });
+  };
+
+  handleDelete = () => {
+    const {
+      basePath,
+      crudDeleteMany,
+      resource,
+      selectedIds,
+      onClick,
+    } = this.props;
+
+    crudDeleteMany(resource, selectedIds, basePath);
+
+    if (typeof onClick === 'function') {
+      onClick();
+    }
+  };
+
+  render() {
+    const {
+      classes,
+      label,
+      icon,
+      onClick,
+      resource,
+      selectedIds,
+      translate,
+      ...rest
+    } = this.props;
+    return (
+      <Fragment>
+        <StyledButton
+          onClick={this.handleClick}
+          label={label}
+          {...sanitizeRestProps(rest)}
+        >
+          {icon}
+        </StyledButton>
+        <Confirm
+          isOpen={this.state.isOpen}
+          title="ra.message.bulk_delete_title"
+          content="ra.message.bulk_delete_content"
+          translateOptions={{
+            smart_count: selectedIds.length,
+            name: inflection.humanize(
+              translate(`resources.${resource}.name`, {
+                smart_count: selectedIds.length,
+                _: inflection.inflect(
+                  resource,
+                  selectedIds.length
+                ),
+              }),
+              true
+            ),
+          }}
+          onConfirm={this.handleDelete}
+          onClose={this.handleDialogClose}
+        />
+      </Fragment>
+    );
+  }
+}
+
+const EnhancedBulkDeleteWithConfirmButton = compose(
+  connect(
+    undefined,
+    { crudDeleteMany }
+  ),
+  translate,
+)(BulkDeleteWithConfirmButton);
+
+export default EnhancedBulkDeleteWithConfirmButton;

src/components/button/BulkDeleteWithUndoButton.js

@@ -0,0 +1,89 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import compose from 'recompose/compose';
+import ActionDelete from '@material-ui/icons/Delete';
+import { startUndoable, crudDeleteMany } from 'ra-core';
+import styled from 'styled-components';
+import Color from '@bootstrap-styled/color';
+
+import Button from './Button';
+
+const sanitizeRestProps = ({
+  basePath,
+  dispatchCrudDeleteMany,
+  filterValues,
+  label,
+  resource,
+  selectedIds,
+  startUndoable,
+  undoable,
+  ...rest
+}) => rest;
+
+const StyledButton = styled(Button)`
+  ${props => `
+    color: ${props.theme.$red} 
+    &:hover {
+      background-color: ${Color(props.theme.$red.fade(0.12).toString())}
+    }
+  `}
+`;
+
+class BulkDeleteWithUndoButton extends Component {
+  static propTypes = {
+    basePath: PropTypes.string,
+    label: PropTypes.string,
+    resource: PropTypes.string.isRequired,
+    startUndoable: PropTypes.func,
+    selectedIds: PropTypes.arrayOf(PropTypes.any).isRequired,
+    icon: PropTypes.element,
+  };
+
+  static defaultProps = {
+    label: 'ra.action.delete',
+    undoable: true,
+    icon: <ActionDelete />,
+  };
+
+  handleClick = () => {
+    const {
+      basePath,
+      resource,
+      selectedIds,
+      startUndoable,
+      onClick,
+    } = this.props;
+
+    startUndoable(crudDeleteMany(resource, selectedIds, basePath));
+
+    if (typeof onClick === 'function') {
+      onClick();
+    }
+  };
+
+  render() {
+    const {
+      classes, label, icon, onClick, ...rest
+    } = this.props;
+    return (
+      <StyledButton
+        onClick={this.handleClick}
+        label={label}
+        className={classes.deleteButton}
+        {...sanitizeRestProps(rest)}
+      >
+        {icon}
+      </StyledButton>
+    );
+  }
+}
+
+const EnhancedBulkDeleteWithConfirmButton = compose(
+  connect(
+    undefined,
+    { startUndoable }
+  ),
+)(BulkDeleteWithUndoButton);
+
+export default EnhancedBulkDeleteWithConfirmButton;

src/components/button/Button.js

@@ -100,10 +100,16 @@ Button.propTypes = {
   color: PropTypes.string,
   disabled: PropTypes.bool,
   label: PropTypes.string,
-  size: PropTypes.string,
+  size: PropTypes.oneOf(['sm', '', 'lg']),
   translate: PropTypes.func.isRequired,
 };
 
+Button.defaultProps = {
+  color: 'primary',
+  size: 'sm',
+};
+
+
 const enhance = compose(
   translate
 );