Buttons part 1

packages/ra-ui-materialui/src/button/BulkDeleteButton.tsx

@@ -0,0 +1,133 @@
+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 {
+    withStyles,
+    createStyles,
+    Theme,
+    WithStyles,
+} from '@material-ui/core/styles';
+import { fade } from '@material-ui/core/styles/colorManipulator';
+import {
+    crudDeleteMany,
+    startUndoable as startUndoableAction,
+    Dispatch,
+    Identifier,
+} from 'ra-core';
+
+import Button from './Button';
+import { ButtonWithIconProps } from './types';
+
+interface Props extends ButtonWithIconProps {
+    undoable: boolean;
+    onClick?: () => void;
+}
+
+// Props injected by react-admin
+interface InjectedProps {
+    basePath: string;
+    resource: string;
+    selectedIds: Identifier[];
+}
+
+// Props injected by the HOCs
+interface EnhancedProps extends WithStyles<typeof styles> {
+    dispatchCrudDeleteMany: Dispatch<typeof crudDeleteMany>;
+    startUndoable: Dispatch<typeof startUndoableAction>;
+}
+
+const styles = (theme: Theme) =>
+    createStyles({
+        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<
+    Props & InjectedProps & EnhancedProps
+> {
+    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 {
+            basePath,
+            classes,
+            dispatchCrudDeleteMany,
+            label,
+            icon,
+            onClick,
+            resource,
+            selectedIds,
+            startUndoable,
+            theme,
+            undoable,
+            ...rest
+        } = this.props;
+        return (
+            <Button
+                onClick={this.handleClick}
+                label={label}
+                className={classes.deleteButton}
+                {...rest}
+            >
+                {icon}
+            </Button>
+        );
+    }
+}
+
+const EnhancedBulkDeleteButton = compose<
+    Props & InjectedProps & EnhancedProps,
+    Props
+>(
+    connect(
+        undefined,
+        {
+            startUndoable: startUndoableAction,
+            dispatchCrudDeleteMany: crudDeleteMany,
+        }
+    ),
+    withStyles(styles)
+)(BulkDeleteButton);
+
+EnhancedBulkDeleteButton.propTypes = {
+    label: PropTypes.string,
+    undoable: PropTypes.bool,
+    icon: PropTypes.element,
+};
+
+EnhancedBulkDeleteButton.defaultProps = {
+    label: 'ra.action.delete',
+    undoable: true,
+    icon: <ActionDelete />,
+};
+
+export default EnhancedBulkDeleteButton;

packages/ra-ui-materialui/src/button/Button.js → packages/ra-ui-materialui/src/button/Button.tsx

@@ -1,14 +1,27 @@
-import React from 'react';
+import React, { SFC, isValidElement, ReactElement } from 'react';
 import PropTypes from 'prop-types';
 import compose from 'recompose/compose';
-import MuiButton from '@material-ui/core/Button';
+import MuiButton, {
+    ButtonProps as MuiButtonProps,
+} from '@material-ui/core/Button';
 import Tooltip from '@material-ui/core/Tooltip';
 import IconButton from '@material-ui/core/IconButton';
-import { withStyles, createStyles } from '@material-ui/core/styles';
+import { withStyles, createStyles, WithStyles } from '@material-ui/core/styles';
 import classnames from 'classnames';
-import { translate } from 'ra-core';
+import { withTranslate, TranslationContextProps } from 'ra-core';
 
 import Responsive from '../layout/Responsive';
+import { IconProps } from '@material-ui/core/Icon';
+
+export interface ButtonProps extends MuiButtonProps {
+    alignIcon: 'left' | 'right';
+    label: string;
+    children: ReactElement<IconProps>;
+}
+
+interface EnhancedProps
+    extends WithStyles<typeof styles>,
+        TranslationContextProps {}
 
 const styles = createStyles({
     button: {
@@ -32,10 +45,10 @@ const styles = createStyles({
     },
 });
 
-const Button = ({
-    alignIcon = 'left',
+const ButtonView: SFC<ButtonProps & EnhancedProps> = ({
+    alignIcon,
     children,
-    classes = {},
+    classes,
     className,
     color,
     disabled,
@@ -78,7 +91,7 @@ const Button = ({
                 {...rest}
             >
                 {alignIcon === 'left' &&
-                    children &&
+                    isValidElement(children) &&
                     React.cloneElement(children, {
                         className: classes[`${size}Icon`],
                     })}
@@ -93,7 +106,7 @@ const Button = ({
                     </span>
                 )}
                 {alignIcon === 'right' &&
-                    children &&
+                    isValidElement(children) &&
                     React.cloneElement(children, {
                         className: classes[`${size}Icon`],
                     })}
@@ -102,26 +115,23 @@ const Button = ({
     />
 );
 
+const enhance = compose<ButtonProps & EnhancedProps, ButtonProps>(
+    withStyles(styles),
+    withTranslate
+);
+
+const Button = enhance(ButtonView);
+
 Button.propTypes = {
-    alignIcon: PropTypes.string,
-    children: PropTypes.element,
-    classes: PropTypes.object,
-    className: PropTypes.string,
-    color: PropTypes.string,
-    disabled: PropTypes.bool,
+    ...MuiButton.propTypes,
+    alignIcon: PropTypes.oneOf(['left', 'right']),
     label: PropTypes.string,
-    size: PropTypes.oneOf(['small', 'medium', 'large']),
-    translate: PropTypes.func.isRequired,
 };
 
 Button.defaultProps = {
+    alignIcon: 'left',
     color: 'primary',
-    size: 'small'
-}
-
-const enhance = compose(
-    withStyles(styles),
-    translate
-);
+    size: 'small',
+};
 
-export default enhance(Button);
+export default Button;