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

Add 'icon' prop to buttons #2556

Merged
merged 2 commits into from
Nov 27, 2018
Merged

Add 'icon' prop to buttons #2556

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
db64620
Add 'icon' to buttons as prop
afilp Nov 22, 2018
6bbda85
Add 'icon' to buttons as prop (rest of buttons)
afilp Nov 25, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 20 additions & 18 deletions packages/ra-ui-materialui/src/button/BulkDeleteButton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,24 @@ const styles = theme => ({
});

class BulkDeleteButton extends Component {
static propTypes = {
basePath: PropTypes.string,
classes: PropTypes.object,
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,
Expand All @@ -53,31 +71,20 @@ class BulkDeleteButton extends Component {
};

render() {
const { classes, label, ...rest } = this.props;
const { classes, label, icon, ...rest } = this.props;
return (
<Button
onClick={this.handleClick}
label={label}
className={classes.deleteButton}
{...sanitizeRestProps(rest)}
>
<ActionDelete />
{icon}
</Button>
);
}
}

BulkDeleteButton.propTypes = {
basePath: PropTypes.string,
classes: PropTypes.object,
dispatchCrudDeleteMany: PropTypes.func.isRequired,
label: PropTypes.string,
resource: PropTypes.string.isRequired,
startUndoable: PropTypes.func,
selectedIds: PropTypes.arrayOf(PropTypes.any).isRequired,
undoable: PropTypes.bool,
};

const EnhancedBulkDeleteButton = compose(
connect(
undefined,
Expand All @@ -89,9 +96,4 @@ const EnhancedBulkDeleteButton = compose(
withStyles(styles)
)(BulkDeleteButton);

EnhancedBulkDeleteButton.defaultProps = {
label: 'ra.action.delete',
undoable: true,
};

export default EnhancedBulkDeleteButton;
4 changes: 3 additions & 1 deletion packages/ra-ui-materialui/src/button/CloneButton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ export const CloneButton = ({
basePath = '',
label = 'ra.action.clone',
record = {},
icon = <Queue />,
...rest
}) => (
<Button
Expand All @@ -23,7 +24,7 @@ export const CloneButton = ({
label={label}
{...rest}
>
<Queue />
{icon}
</Button>
);

Expand All @@ -33,6 +34,7 @@ CloneButton.propTypes = {
classes: PropTypes.object,
label: PropTypes.string,
record: PropTypes.object,
icon: PropTypes.element,
};

const enhance = shouldUpdate(
Expand Down
6 changes: 4 additions & 2 deletions packages/ra-ui-materialui/src/button/CreateButton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ const CreateButton = ({
classes = {},
translate,
label = 'ra.action.create',
icon = <ContentAdd />,
...rest
}) => (
<Responsive
Expand All @@ -47,7 +48,7 @@ const CreateButton = ({
aria-label={label && translate(label)}
{...rest}
>
<ContentAdd />
{icon}
</MuiButton>
}
medium={
Expand All @@ -58,7 +59,7 @@ const CreateButton = ({
label={label && translate(label)}
{...rest}
>
<ContentAdd />
{icon}
</Button>
}
/>
Expand All @@ -71,6 +72,7 @@ CreateButton.propTypes = {
label: PropTypes.string,
size: PropTypes.string,
translate: PropTypes.func.isRequired,
icon: PropTypes.element,
};

const enhance = compose(
Expand Down
5 changes: 4 additions & 1 deletion packages/ra-ui-materialui/src/button/DeleteButton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ class DeleteButton extends Component {
label = 'ra.action.delete',
classes = {},
className,
icon
} = this.props;
return (
<Button
Expand All @@ -61,7 +62,7 @@ class DeleteButton extends Component {
)}
key="button"
>
<ActionDelete />
{icon}
</Button>
);
}
Expand All @@ -83,11 +84,13 @@ DeleteButton.propTypes = {
startUndoable: PropTypes.func,
translate: PropTypes.func,
undoable: PropTypes.bool,
icon: PropTypes.element,
};

DeleteButton.defaultProps = {
redirect: 'list',
undoable: true,
icon: <ActionDelete />,
};

export default compose(
Expand Down
4 changes: 3 additions & 1 deletion packages/ra-ui-materialui/src/button/EditButton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ const EditButton = ({
basePath = '',
label = 'ra.action.edit',
record = {},
icon = <ContentCreate />,
...rest
}) => (
<Button
Expand All @@ -19,7 +20,7 @@ const EditButton = ({
label={label}
{...rest}
>
<ContentCreate />
{icon}
</Button>
);

Expand All @@ -29,6 +30,7 @@ EditButton.propTypes = {
classes: PropTypes.object,
label: PropTypes.string,
record: PropTypes.object,
icon: PropTypes.element,
};

const enhance = shouldUpdate(
Expand Down
16 changes: 9 additions & 7 deletions packages/ra-ui-materialui/src/button/ExportButton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,13 @@ class ExportButton extends Component {
maxResults: PropTypes.number.isRequired,
resource: PropTypes.string.isRequired,
sort: PropTypes.object,
icon: PropTypes.element,
};

static defaultProps = {
label: 'ra.action.export',
maxResults: 1000,
icon: <GetApp />,
};

handleClick = () => {
Expand Down Expand Up @@ -131,23 +138,18 @@ class ExportButton extends Component {
};

render() {
const { label, ...rest } = this.props;
const { label, icon, ...rest } = this.props;

return (
<Button
onClick={this.handleClick}
label={label}
{...sanitizeRestProps(rest)}
>
<GetApp />
{icon}
</Button>
);
}
}

ExportButton.defaultProps = {
label: 'ra.action.export',
maxResults: 1000,
};

export default connect()(ExportButton); // inject redux dispatch
9 changes: 7 additions & 2 deletions packages/ra-ui-materialui/src/button/ListButton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,20 @@ import { Link } from 'react-router-dom';

import Button from './Button';

const ListButton = ({ basePath = '', label = 'ra.action.list', ...rest }) => (
const ListButton = ({ basePath = '', label = 'ra.action.list', icon, ...rest }) => (
<Button component={Link} to={basePath} label={label} {...rest}>
<ActionList />
{icon}
</Button>
);

ListButton.propTypes = {
basePath: PropTypes.string,
label: PropTypes.string,
icon: PropTypes.element,
};

ListButton.defaultProps = {
icon: <ActionList />,
};

export default ListButton;
6 changes: 4 additions & 2 deletions packages/ra-ui-materialui/src/button/RefreshButton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,12 @@ class RefreshButton extends Component {
static propTypes = {
label: PropTypes.string,
refreshView: PropTypes.func.isRequired,
icon: PropTypes.element,
};

static defaultProps = {
label: 'ra.action.refresh',
icon: <NavigationRefresh />,
};

handleClick = event => {
Expand All @@ -22,11 +24,11 @@ class RefreshButton extends Component {
};

render() {
const { label, refreshView, ...rest } = this.props;
const { label, refreshView, icon, ...rest } = this.props;

return (
<Button label={label} onClick={this.handleClick} {...rest}>
<NavigationRefresh />
{icon}
</Button>
);
}
Expand Down
5 changes: 4 additions & 1 deletion packages/ra-ui-materialui/src/button/RefreshIconButton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,12 @@ class RefreshButton extends Component {
label: PropTypes.string,
refreshView: PropTypes.func.isRequired,
translate: PropTypes.func.isRequired,
icon: PropTypes.element,
};

static defaultProps = {
label: 'ra.action.refresh',
icon: <NavigationRefresh />,
};

handleClick = event => {
Expand All @@ -30,6 +32,7 @@ class RefreshButton extends Component {
label,
refreshView,
translate,
icon,
...rest
} = this.props;

Expand All @@ -42,7 +45,7 @@ class RefreshButton extends Component {
onClick={this.handleClick}
{...rest}
>
<NavigationRefresh />
{icon}
</IconButton>
</Tooltip>
);
Expand Down
53 changes: 29 additions & 24 deletions packages/ra-ui-materialui/src/button/SaveButton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,31 @@ const sanitizeRestProps = ({
}) => rest;

export class SaveButton extends Component {
static propTypes = {
className: PropTypes.string,
classes: PropTypes.object,
handleSubmitWithRedirect: PropTypes.func,
invalid: PropTypes.bool,
label: PropTypes.string,
pristine: PropTypes.bool,
redirect: PropTypes.oneOfType([
PropTypes.string,
PropTypes.bool,
PropTypes.func,
]),
saving: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
showNotification: PropTypes.func,
submitOnEnter: PropTypes.bool,
translate: PropTypes.func.isRequired,
variant: PropTypes.oneOf(['raised', 'flat', 'fab']),
icon: PropTypes.element,
};

static defaultProps = {
handleSubmitWithRedirect: () => () => {},
icon: <ContentSave />,
};

handleClick = e => {
const {
handleSubmitWithRedirect,
Expand Down Expand Up @@ -73,6 +98,7 @@ export class SaveButton extends Component {
submitOnEnter,
translate,
variant = 'raised',
icon,
...rest
} = this.props;

Expand All @@ -93,37 +119,16 @@ export class SaveButton extends Component {
className={classes.iconPaddingStyle}
/>
) : (
<ContentSave className={classes.iconPaddingStyle} />
React.cloneElement(icon, {
className: classes.iconPaddingStyle,
})
)}
{label && translate(label, { _: label })}
</Button>
);
}
}

SaveButton.propTypes = {
className: PropTypes.string,
classes: PropTypes.object,
handleSubmitWithRedirect: PropTypes.func,
invalid: PropTypes.bool,
label: PropTypes.string,
pristine: PropTypes.bool,
redirect: PropTypes.oneOfType([
PropTypes.string,
PropTypes.bool,
PropTypes.func,
]),
saving: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
showNotification: PropTypes.func,
submitOnEnter: PropTypes.bool,
translate: PropTypes.func.isRequired,
variant: PropTypes.oneOf(['raised', 'flat', 'fab']),
};

SaveButton.defaultProps = {
handleSubmitWithRedirect: () => () => {},
};

const enhance = compose(
translate,
connect(
Expand Down
Loading