Merge pull request #1663 from adamhenson/iconmenu-active-prop
IconMenu: New "active" Prop (fixes #1662)old
commit
a325e20b4b
|
@ -13,6 +13,11 @@ export interface IconMenuTheme {
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface IconMenuProps extends ReactToolbox.Props {
|
export interface IconMenuProps extends ReactToolbox.Props {
|
||||||
|
/**
|
||||||
|
* If true, the inner Menu component will be active.
|
||||||
|
* @default false
|
||||||
|
*/
|
||||||
|
active?: boolean;
|
||||||
/**
|
/**
|
||||||
* Children to pass through the component.
|
* Children to pass through the component.
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -9,6 +9,7 @@ import InjectMenu from './Menu';
|
||||||
const factory = (IconButton, Menu) => {
|
const factory = (IconButton, Menu) => {
|
||||||
class IconMenu extends Component {
|
class IconMenu extends Component {
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
|
active: PropTypes.bool,
|
||||||
children: PropTypes.node,
|
children: PropTypes.node,
|
||||||
className: PropTypes.string,
|
className: PropTypes.string,
|
||||||
icon: PropTypes.oneOfType([
|
icon: PropTypes.oneOfType([
|
||||||
|
@ -32,6 +33,7 @@ const factory = (IconButton, Menu) => {
|
||||||
};
|
};
|
||||||
|
|
||||||
static defaultProps = {
|
static defaultProps = {
|
||||||
|
active: false,
|
||||||
className: '',
|
className: '',
|
||||||
icon: 'more_vert',
|
icon: 'more_vert',
|
||||||
iconRipple: true,
|
iconRipple: true,
|
||||||
|
@ -41,7 +43,13 @@ const factory = (IconButton, Menu) => {
|
||||||
};
|
};
|
||||||
|
|
||||||
state = {
|
state = {
|
||||||
active: false,
|
active: this.props.active,
|
||||||
|
}
|
||||||
|
|
||||||
|
componentWillReceiveProps(nextProps) {
|
||||||
|
if (this.state.active !== nextProps.active) {
|
||||||
|
this.setState({ active: nextProps.active });
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
handleButtonClick = (event) => {
|
handleButtonClick = (event) => {
|
||||||
|
@ -56,7 +64,7 @@ const factory = (IconButton, Menu) => {
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const {
|
const {
|
||||||
children, className, icon, iconRipple, inverse, menuRipple, onHide, // eslint-disable-line
|
active, children, className, icon, iconRipple, inverse, menuRipple, onHide, // eslint-disable-line
|
||||||
onSelect, onShow, position, selectable, selected, theme, ...other
|
onSelect, onShow, position, selectable, selected, theme, ...other
|
||||||
} = this.props;
|
} = this.props;
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -1,8 +1,60 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { shallow } from 'enzyme';
|
import { mount, shallow } from 'enzyme';
|
||||||
|
import { IconMenu } from '../IconMenu';
|
||||||
import { Menu } from '../Menu';
|
import { Menu } from '../Menu';
|
||||||
import { MenuItem } from '../MenuItem';
|
import { MenuItem } from '../MenuItem';
|
||||||
|
|
||||||
|
describe('IconMenu', () => {
|
||||||
|
describe('#on mount', () => {
|
||||||
|
describe('when \'active\' prop is not set', () => {
|
||||||
|
it('sets \'active\' Menu prop correctly', () => {
|
||||||
|
const wrapper = shallow(<IconMenu />);
|
||||||
|
expect(wrapper.find('Menu').props().active).toBe(false);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('when \'active\' prop is set to false', () => {
|
||||||
|
it('sets \'active\' Menu prop correctly', () => {
|
||||||
|
const wrapper = shallow(<IconMenu active={false} />);
|
||||||
|
expect(wrapper.find('Menu').props().active).toBe(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('sets \'active\' Menu prop correctly after IconButton click', () => {
|
||||||
|
const wrapper = mount(<IconMenu active={false} />);
|
||||||
|
wrapper.find('IconButton').simulate('click');
|
||||||
|
expect(wrapper.find('Menu').props().active).toBe(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('sets \'active\' Menu prop correctly when prop is set after IconButton click', () => {
|
||||||
|
const wrapper = mount(<IconMenu active={false} />);
|
||||||
|
wrapper.find('IconButton').simulate('click');
|
||||||
|
wrapper.setProps({ active: false });
|
||||||
|
expect(wrapper.find('Menu').props().active).toBe(false);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('when \'active\' prop is set to true', () => {
|
||||||
|
it('sets \'active\' Menu prop correctly', () => {
|
||||||
|
const wrapper = shallow(<IconMenu active />);
|
||||||
|
expect(wrapper.find('Menu').props().active).toBe(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('sets \'active\' Menu prop correctly after IconButton click', () => {
|
||||||
|
const wrapper = mount(<IconMenu active />);
|
||||||
|
wrapper.find('IconButton').simulate('click');
|
||||||
|
expect(wrapper.find('Menu').props().active).toBe(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('sets \'active\' Menu prop correctly when prop is set after IconButton click', () => {
|
||||||
|
const wrapper = mount(<IconMenu active />);
|
||||||
|
wrapper.find('IconButton').simulate('click');
|
||||||
|
wrapper.setProps({ active: true });
|
||||||
|
expect(wrapper.find('Menu').props().active).toBe(true);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
describe('MenuItem', () => {
|
describe('MenuItem', () => {
|
||||||
describe('#onClick', () => {
|
describe('#onClick', () => {
|
||||||
it('passes to listener the event', () => {
|
it('passes to listener the event', () => {
|
||||||
|
|
|
@ -61,6 +61,7 @@ As the most usual scenario will be to open the menu from a click in an Icon, we
|
||||||
|
|
||||||
| Name | Type | Default | Description|
|
| Name | Type | Default | Description|
|
||||||
|:-----|:-----|:-----|:-----|
|
|:-----|:-----|:-----|:-----|
|
||||||
|
| `active` | `Boolean` | `false` | If true, the inner `Menu` component will be active. |
|
||||||
| `className` | `String` | `''` | Set a class to give custom styles to the icon wrapper.|
|
| `className` | `String` | `''` | Set a class to give custom styles to the icon wrapper.|
|
||||||
| `icon` | `String` or `Element` | `more_vert` | Icon font key string or Element to display the opener icon. |
|
| `icon` | `String` or `Element` | `more_vert` | Icon font key string or Element to display the opener icon. |
|
||||||
| `iconRipple` | `Boolean` | `true` | If true, the icon will show a ripple when is clicked. |
|
| `iconRipple` | `Boolean` | `true` | If true, the icon will show a ripple when is clicked. |
|
||||||
|
|
Loading…
Reference in New Issue