—— 刘旸 @外居乐
import React from 'react';
import Modal from 'react-modal';
import ReactDOM from 'react-dom';
Modal.setAppElement('#app');
const App = () => (
<div>
<Modal
isOpen
onAfterOpen={...}
onRequestClose={...}
style={...}
contentLabel="Opened Modal"
>
Opened Modal
</Modal>
<Modal
isOpen={false}
onAfterOpen={...}
onRequestClose={...}
style={...}
contentLabel="Closed Modal"
>
Closed Modal
</Modal>
</div>
)
ReactDOM.render(<App />, document.getElementById('app'));
<html lang="en">
<head>...</head>
<body class="ReactModal__Body--open">
<div id="app" aria-hidden="true">...</div>
<div class="ReactModalPortal">
<div class="Overlay">
<div aria-label="Opened Modal" tabindex="-1">
Opened Modal
</div>
</div>
</div>
<div class="ReactModalPortal"></div>
</body>
</html>
import React from 'react';
import Modal from 'react-modal';
import { compose, withState, pure } from 'recompose';
export default compose(
pure,
withState('isOpen', 'setIsOpen', false),
)(({ isOpen, setIsOpen }) => (
<div>
<Modal
isOpen={isOpen}
onRequestClose={() => setIsOpen(false)}
>
Modal
</Modal>
<button onClick={() => setIsOpen(true)}>Open Modal</button>
</div>
));
import React from 'react';
import Modal from 'react-modal';
import { compose, withState, pure } from 'recompose';
const Item = ({ openModal }) => (
<div>
<button onClick={openModal}>Open Modal</button>
</div>
);
export default compose(
pure,
withState('isOpen', 'setIsOpen', false),
withState('currentItem', 'setCurrentItem', {}),
)(({ isOpen, setIsOpen, items, setCurrentItem, currentItem }) => (
<div>
<Modal
isOpen={isOpen}
onRequestClose={() => setIsOpen(false)}
>
Selected Item: {currentItem.id}
</Modal>
{items.map(item => (
<Item
key={item.id}
openModal={() => {
setIsOpen(true);
setCurrentItem(item);
}}
/>
))}
</div>
));
import { OPEN_CONFIRMATION, CONFIRMATION_OK, CONFIRMATION_CANCEL } from 'action-types';
import { startConfirmationLoading } from 'actions';
export default () => {
const callbacks = [];
return ({ dispatch }) => (next) => async (action) => {
const { payload, type } = action;
if (type === OPEN_CONFIRMATION) {
const { onOK, onCancel } = payload;
callbacks.push({ onOK, onCancel });
} else if (type === CONFIRMATION_OK || type === CONFIRMATION_CANCEL) {
const { onOK, onCancel } = callbacks.pop();
const result = type === CONFIRMATION_OK ? onOK() : onCancel();
if (isPromise(result)) {
dispatch(startConfirmationLoading());
await result;
return next(action);
}
}
return next(action);
};
}
import { OPEN_LOGIN_MODAL, CLOSE_LOGIN_MODAL } from 'action-types';
import { prop } from 'lodash/fp';
export default () => {
let loginPromise = null;
let resolveLogin = null;
let rejectLogin = null;
return ({ getState }) => (next) => (action) => {
const { type, payload } = action;
if (type === OPEN_LOGIN_MODAL) {
loginPromise = new Promise((resolve, reject) => {
resolveLogin = resolve;
rejectLogin = reject;
});
next(action);
return loginPromise;
}
if (type === CLOSE_LOGIN_MODAL) {
if (loginPromise) {
if (payload.success) {
resolveLogin({
payload: prop('currentAccount.accountId')(getState()),
});
} else {
rejectLogin();
}
loginPromise = null;
}
}
return next(action);
};
};