{
{} : this.handleClick}
onFocus={this.handleFocus}
onBlur={this.handleBlur}
onKeyUp={this.handleKeyUp}
@@ -359,7 +363,7 @@ class BaseResourceItem extends Component {
onMouseOut={this.handleMouseOut}
data-href={url}
>
- {accessibleMarkup}
+ {disabled ? null : accessibleMarkup}
{containerMarkup}
@@ -458,12 +462,13 @@ class BaseResourceItem extends Component {
// This fires onClick when there is a URL on the item
private handleKeyUp = (event: React.KeyboardEvent) => {
const {
+ disabled,
onClick = noop,
context: {selectMode},
} = this.props;
const {key} = event;
- if (key === 'Enter' && this.props.url && !selectMode) {
+ if (key === 'Enter' && this.props.url && !selectMode && !disabled) {
onClick();
}
};
diff --git a/polaris-react/src/components/ResourceItem/tests/ResourceItem.test.tsx b/polaris-react/src/components/ResourceItem/tests/ResourceItem.test.tsx
index c04320590b4..70bc7cc05c0 100644
--- a/polaris-react/src/components/ResourceItem/tests/ResourceItem.test.tsx
+++ b/polaris-react/src/components/ResourceItem/tests/ResourceItem.test.tsx
@@ -227,6 +227,22 @@ describe('', () => {
expect(element).toContainReactComponent('div', {'data-href': url} as any);
});
+
+ it('does not render an when disabled prop is true', () => {
+ const element = mountWithApp(
+
+
+ ,
+ );
+
+ expect(element).not.toContainReactComponent(UnstyledLink);
+ });
});
describe('external', () => {
@@ -388,6 +404,38 @@ describe('', () => {
expect(onClick).not.toHaveBeenCalled();
});
+ it('does not call onClick when hitting keyUp on the item when onClick exists, url exists and is disabled', () => {
+ const onClick = jest.fn();
+ const wrapper = mountWithApp(
+
+
+ ,
+ );
+
+ findResourceItem(wrapper)!.trigger('onKeyUp', {key: 'Enter'});
+ expect(onClick).not.toHaveBeenCalled();
+ });
+
+ it('does not call onClick when clicking on the item when onClick exists and is disabled', () => {
+ const onClick = jest.fn();
+ const wrapper = mountWithApp(
+
+
+ ,
+ );
+
+ findResourceItem(wrapper)!.trigger('onClick', {
+ stopPropagation: () => {},
+ nativeEvent: {},
+ });
+ expect(onClick).not.toHaveBeenCalledWith(itemId);
+ });
+
it('calls window.open on ctrlKey + click', () => {
const wrapper = mountWithApp(
@@ -448,6 +496,15 @@ describe('', () => {
false,
);
});
+
+ it('renders a disabled Checkbox if the item is disabled', () => {
+ const wrapper = mountWithApp(
+
+
+ ,
+ );
+ expect(wrapper).toContainReactComponent(Checkbox, {disabled: true});
+ });
});
describe('SelectMode', () => {