ElyBy-Mirror/accounts-frontend
1
0
Fork 0
mirror of https://github.com/elyby/accounts-frontend.git synced 2024-12-29 16:30:54 +05:30
Code Issues Packages Projects Releases Wiki Activity

#120: Refactor popup

Browse Source
This commit is contained in:
SleepWalker 2016-07-26 07:40:45 +03:00
parent 25134656f3
commit 9ee2f8f709
6 changed files with 121 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/ui/popup/PopupStack.jsx
View File

@ -30,18 +30,13 @@ export class PopupStack extends Component {
transitionLeaveTimeout={500}
>
{popups.map((popup, index) => {
const Popup = popup.type;
const defaultProps = {
onClose: this.onClose(popup)
};
const props = typeof popup.props === 'function'
? popup.props(defaultProps)
: {...defaultProps, ...popup.props};
const {Popup} = popup;
return (
<div className={styles.overlay} key={index} onClick={this.onOverlayClick(popup, props)}>
<Popup {...props} />
<div className={styles.overlay} key={index}
onClick={this.onOverlayClick(popup)}
>
<Popup onClose={this.onClose(popup)} />
</div>
);
})}
@ -53,9 +48,9 @@ export class PopupStack extends Component {
return this.props.destroy.bind(null, popup);
}
onOverlayClick(popup, popupProps) {
onOverlayClick(popup) {
return (event) => {
if (event.target !== event.currentTarget || popupProps.disableOverlayClose) {
if (event.target !== event.currentTarget || popup.disableOverlayClose) {
return;
}

21
src/components/ui/popup/actions.js
View File

@ -1,11 +1,22 @@
export const POPUP_CREATE = 'POPUP_CREATE';
export function create(type, props = {}) {
/**
* @param {object|ReactComponent} payload - react component or options
* @param {ReactComponent} payload.Popup
* @param {bool} [payload.disableOverlayClose=false] - do not allow hiding popup
*
* @return {object}
*/
export function create(payload) {
if (typeof payload === 'function') {
payload = {
Popup: payload
};
}
return {
type: POPUP_CREATE,
payload: {
type,
props
}
payload
};
}

10
src/components/ui/popup/reducer.js
View File

@ -6,20 +6,16 @@ export default combineReducers({
popups
});
function popups(popups = [], {type, payload}) {
function popups(popups = [], {type, payload = {}}) {
switch (type) {
case POPUP_CREATE:
if (!payload.type) {
throw new Error('Popup type is required');
if (!payload.Popup) {
throw new Error('Popup is required');
}
return popups.concat(payload);
case POPUP_DESTROY:
if (!payload.type) {
throw new Error('Popup type is required');
}
return popups.filter((popup) => popup !== payload);
default:

37
src/pages/profile/ProfilePage.jsx
View File

@ -74,24 +74,27 @@ export default connect(null, {
function requestPassword(form) {
return new Promise((resolve) => {
dispatch(createPopup(PasswordRequestForm, (props) => ({
form,
disableOverlayClose: true,
onSubmit: () => {
form.beginLoading();
sendData()
.catch((resp) => {
if (resp.errors) {
form.setErrors(resp.errors);
}
dispatch(createPopup({
Popup(props) {
const onSubmit = () => {
form.beginLoading();
sendData()
.catch((resp) => {
if (resp.errors) {
form.setErrors(resp.errors);
}
return Promise.reject(resp);
})
.then(resolve)
.then(props.onClose)
.finally(() => form.endLoading());
}
})));
return Promise.reject(resp);
})
.then(resolve)
.then(props.onClose)
.finally(() => form.endLoading());
};
return <PasswordRequestForm form={form} onSubmit={onSubmit} />;
},
disableOverlayClose: true
}));
});
}
}

84
tests/components/ui/popup/PopupStack.test.jsx
View File

@ -1,10 +1,11 @@
import React from 'react';
import { shallow } from 'enzyme';
import { shallow, mount } from 'enzyme';
import { PopupStack } from 'components/ui/popup/PopupStack';
import styles from 'components/ui/popup/popup.scss';
function DummyPopup() {}
function DummyPopup() {return null;}
describe('<PopupStack />', () => {
it('renders all popup components', () => {
@ -12,10 +13,10 @@ describe('<PopupStack />', () => {
destroy: () => {},
popups: [
{
type: DummyPopup
Popup: DummyPopup
},
{
type: DummyPopup
Popup: DummyPopup
}
]
};
@ -24,7 +25,7 @@ describe('<PopupStack />', () => {
expect(component.find(DummyPopup)).to.have.length(2);
});
it('should pass provided props', () => {
it('should pass onClose as props', () => {
const expectedProps = {
foo: 'bar'
};
@ -33,47 +34,29 @@ describe('<PopupStack />', () => {
destroy: () => {},
popups: [
{
type: DummyPopup,
props: expectedProps
}
]
};
const component = shallow(<PopupStack {...props} />);
Popup: (props = {}) => {
expect(props.onClose).to.be.a('function');
expect(component.find(DummyPopup).prop('foo')).to.be.equal(expectedProps.foo);
});
it('should use props as proxy if it is function', () => {
const expectedProps = {
foo: 'bar'
};
const props = {
destroy: () => {},
popups: [
{
type: DummyPopup,
props: (props) => {
expect(props).to.have.property('onClose');
return expectedProps;
return <DummyPopup {...expectedProps} />;
}
}
]
};
const component = shallow(<PopupStack {...props} />);
const component = mount(<PopupStack {...props} />);
expect(component.find(DummyPopup).props()).to.be.deep.equal(expectedProps);
const popup = component.find(DummyPopup);
expect(popup).to.have.length(1);
expect(popup.props()).to.deep.equal(expectedProps);
});
it('should hide popup, when onClose called', () => {
const props = {
popups: [
{
type: DummyPopup
Popup: DummyPopup
},
{
type: DummyPopup
Popup: DummyPopup
}
],
destroy: sinon.stub()
@ -85,4 +68,41 @@ describe('<PopupStack />', () => {
sinon.assert.calledOnce(props.destroy);
sinon.assert.calledWith(props.destroy, sinon.match.same(props.popups[1]));
});
it('should hide popup, when overlay clicked', () => {
const preventDefault = sinon.stub();
const props = {
destroy: sinon.stub(),
popups: [
{
Popup: DummyPopup
}
]
};
const component = shallow(<PopupStack {...props} />);
const overlay = component.find(`.${styles.overlay}`);
overlay.simulate('click', {target: 1, currentTarget: 1, preventDefault});
sinon.assert.calledOnce(props.destroy);
sinon.assert.calledOnce(preventDefault);
});
it('should hide popup on overlay click if disableOverlayClose', () => {
const props = {
destroy: sinon.stub(),
popups: [
{
Popup: DummyPopup,
disableOverlayClose: true
}
]
};
const component = shallow(<PopupStack {...props} />);
const overlay = component.find(`.${styles.overlay}`);
overlay.simulate('click', {target: 1, currentTarget: 1, preventDefault() {}});
sinon.assert.notCalled(props.destroy);
});
});

46
tests/components/ui/popup/reducer.test.js
View File

@ -11,36 +11,38 @@ describe('popup/reducer', () => {
describe('#create', () => {
it('should create popup', () => {
const actual = reducer(undefined, create({
Popup: FakeComponent
}));
expect(actual.popups[0]).to.be.deep.equal({
Popup: FakeComponent
});
});
it('should support shortcut popup creation', () => {
const actual = reducer(undefined, create(FakeComponent));
expect(actual.popups[0]).to.be.deep.equal({
type: FakeComponent,
props: {}
Popup: FakeComponent
});
});
it('should store props', () => {
const expectedProps = {foo: 'bar'};
const actual = reducer(undefined, create(FakeComponent, expectedProps));
expect(actual.popups[0]).to.be.deep.equal({
type: FakeComponent,
props: expectedProps
});
});
it('should not remove existed popups', () => {
let actual = reducer(undefined, create(FakeComponent));
actual = reducer(actual, create(FakeComponent));
it('should create multiple popups', () => {
let actual = reducer(undefined, create({
Popup: FakeComponent
}));
actual = reducer(actual, create({
Popup: FakeComponent
}));
expect(actual.popups[1]).to.be.deep.equal({
type: FakeComponent,
props: {}
Popup: FakeComponent
});
});
it('throws when no type provided', () => {
expect(() => reducer(undefined, create())).to.throw('Popup type is required');
expect(() => reducer(undefined, create())).to.throw('Popup is required');
});
});
@ -62,17 +64,15 @@ describe('popup/reducer', () => {
});
it('should not remove something, that it should not', () => {
state = reducer(state, create('foo'));
state = reducer(state, create({
Popup: FakeComponent
}));
state = reducer(state, destroy(popup));
expect(state.popups).to.have.length(1);
expect(state.popups[0]).to.not.equal(popup);
});
it('throws when no type provided', () => {
expect(() => reducer(undefined, destroy({}))).to.throw('Popup type is required');
});
});
});