ref: Creating popups with hook, fix translation keys passing
Maksim Eltyshev
3 years ago
parent
0f50dbde92
commit
8a46a2e0b9
@ -1,5 +0,0 @@
|
||||
import { withPopup } from '../lib/popup';
|
||||
|
||||
import BoardMembershipsStep from './BoardMembershipsStep';
|
||||
|
||||
export default withPopup(BoardMembershipsStep);
|
||||
@ -1,3 +0,0 @@
|
||||
import AddPopup from './AddPopup';
|
||||
|
||||
export default AddPopup;
|
||||
@ -0,0 +1,3 @@
|
||||
import AddStep from './AddStep';
|
||||
|
||||
export default AddStep;
|
||||
@ -1,5 +0,0 @@
|
||||
import { withPopup } from '../lib/popup';
|
||||
|
||||
import CardMoveStep from './CardMoveStep';
|
||||
|
||||
export default withPopup(CardMoveStep);
|
||||
@ -1,5 +0,0 @@
|
||||
import { withPopup } from '../lib/popup';
|
||||
|
||||
import DeleteStep from './DeleteStep';
|
||||
|
||||
export default withPopup(DeleteStep);
|
||||
@ -1,5 +0,0 @@
|
||||
import { withPopup } from '../lib/popup';
|
||||
|
||||
import DueDateEditStep from './DueDateEditStep';
|
||||
|
||||
export default withPopup(DueDateEditStep);
|
||||
@ -1,5 +0,0 @@
|
||||
import { withPopup } from '../lib/popup';
|
||||
|
||||
import LabelsStep from './LabelsStep';
|
||||
|
||||
export default withPopup(LabelsStep);
|
||||
@ -1,3 +0,0 @@
|
||||
import AddPopup from './AddPopup';
|
||||
|
||||
export default AddPopup;
|
||||
@ -0,0 +1,3 @@
|
||||
import AddStep from './AddStep';
|
||||
|
||||
export default AddStep;
|
||||
@ -1,5 +0,0 @@
|
||||
import { withPopup } from '../lib/popup';
|
||||
|
||||
import TimerEditStep from './TimerEditStep';
|
||||
|
||||
export default withPopup(TimerEditStep);
|
||||
@ -1,3 +0,0 @@
|
||||
import UserAddPopup from './UserAddPopup';
|
||||
|
||||
export default UserAddPopup;
|
||||
@ -0,0 +1,3 @@
|
||||
import UserAddStep from './UserAddStep';
|
||||
|
||||
export default UserAddStep;
|
||||
@ -1,5 +0,0 @@
|
||||
import { withPopup } from '../lib/popup';
|
||||
|
||||
import UserEmailEditStep from './UserEmailEditStep';
|
||||
|
||||
export default withPopup(UserEmailEditStep);
|
||||
@ -1,5 +0,0 @@
|
||||
import { withPopup } from '../lib/popup';
|
||||
|
||||
import UserPasswordEditStep from './UserPasswordEditStep';
|
||||
|
||||
export default withPopup(UserPasswordEditStep);
|
||||
@ -1,3 +0,0 @@
|
||||
import UserPopup from './UserPopup';
|
||||
|
||||
export default UserPopup;
|
||||
@ -0,0 +1,3 @@
|
||||
import UserStep from './UserStep';
|
||||
|
||||
export default UserStep;
|
||||
@ -1,5 +0,0 @@
|
||||
import { withPopup } from '../lib/popup';
|
||||
|
||||
import UserUsernameEditStep from './UserUsernameEditStep';
|
||||
|
||||
export default withPopup(UserUsernameEditStep);
|
||||
@ -1,4 +1,4 @@
|
||||
import withPopup from './with-popup';
|
||||
import usePopup from './use-popup';
|
||||
import closePopup from './close-popup';
|
||||
|
||||
export { withPopup, closePopup };
|
||||
export { usePopup, closePopup };
|
||||
|
||||
@ -0,0 +1,122 @@
|
||||
import { ResizeObserver } from '@juggle/resize-observer';
|
||||
import React, { useCallback, useMemo, useRef, useState } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Button, Popup as SemanticUIPopup } from 'semantic-ui-react';
|
||||
|
||||
import styles from './Popup.module.css';
|
||||
|
||||
export default (Step, props) => {
|
||||
return useMemo(() => {
|
||||
const Popup = React.memo(({ children, onClose, ...stepProps }) => {
|
||||
const [isOpened, setIsOpened] = useState(false);
|
||||
|
||||
const wrapper = useRef(null);
|
||||
const resizeObserver = useRef(null);
|
||||
|
||||
const handleOpen = useCallback(() => {
|
||||
setIsOpened(true);
|
||||
}, []);
|
||||
|
||||
const handleClose = useCallback(() => {
|
||||
setIsOpened(false);
|
||||
|
||||
if (onClose) {
|
||||
onClose();
|
||||
}
|
||||
}, [onClose]);
|
||||
|
||||
const handleMouseDown = useCallback((event) => {
|
||||
event.stopPropagation();
|
||||
}, []);
|
||||
|
||||
const handleClick = useCallback((event) => {
|
||||
event.stopPropagation();
|
||||
}, []);
|
||||
|
||||
const handleTriggerClick = useCallback(
|
||||
(event) => {
|
||||
event.stopPropagation();
|
||||
|
||||
const { onClick } = children;
|
||||
|
||||
if (onClick) {
|
||||
onClick(event);
|
||||
}
|
||||
},
|
||||
[children],
|
||||
);
|
||||
|
||||
const handleContentRef = useCallback((element) => {
|
||||
if (resizeObserver.current) {
|
||||
resizeObserver.current.disconnect();
|
||||
}
|
||||
|
||||
if (!element) {
|
||||
resizeObserver.current = null;
|
||||
return;
|
||||
}
|
||||
|
||||
resizeObserver.current = new ResizeObserver(() => {
|
||||
if (resizeObserver.current.isInitial) {
|
||||
resizeObserver.current.isInitial = false;
|
||||
return;
|
||||
}
|
||||
|
||||
wrapper.current.positionUpdate();
|
||||
});
|
||||
|
||||
resizeObserver.current.isInitial = true;
|
||||
resizeObserver.current.observe(element);
|
||||
}, []);
|
||||
|
||||
const tigger = React.cloneElement(children, {
|
||||
onClick: handleTriggerClick,
|
||||
});
|
||||
|
||||
return (
|
||||
<SemanticUIPopup
|
||||
basic
|
||||
wide
|
||||
ref={wrapper}
|
||||
trigger={tigger}
|
||||
on="click"
|
||||
open={isOpened}
|
||||
position="bottom left"
|
||||
popperModifiers={[
|
||||
{
|
||||
name: 'preventOverflow',
|
||||
enabled: true,
|
||||
options: {
|
||||
altAxis: true,
|
||||
padding: 20,
|
||||
},
|
||||
},
|
||||
]}
|
||||
className={styles.wrapper}
|
||||
onOpen={handleOpen}
|
||||
onClose={handleClose}
|
||||
onMouseDown={handleMouseDown}
|
||||
onClick={handleClick}
|
||||
{...props} // eslint-disable-line react/jsx-props-no-spreading
|
||||
>
|
||||
<div ref={handleContentRef}>
|
||||
<Button icon="close" onClick={handleClose} className={styles.closeButton} />
|
||||
{/* eslint-disable-next-line react/jsx-props-no-spreading */}
|
||||
<Step {...stepProps} onClose={handleClose} />
|
||||
</div>
|
||||
</SemanticUIPopup>
|
||||
);
|
||||
});
|
||||
|
||||
Popup.propTypes = {
|
||||
children: PropTypes.node.isRequired,
|
||||
onClose: PropTypes.func,
|
||||
};
|
||||
|
||||
Popup.defaultProps = {
|
||||
onClose: undefined,
|
||||
};
|
||||
|
||||
return Popup;
|
||||
}, [props]);
|
||||
};
|
||||
@ -1,120 +0,0 @@
|
||||
import { ResizeObserver } from '@juggle/resize-observer';
|
||||
import React, { useCallback, useRef, useState } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Button, Popup as SemanticUIPopup } from 'semantic-ui-react';
|
||||
|
||||
import styles from './Popup.module.css';
|
||||
|
||||
export default (WrappedComponent, defaultProps) => {
|
||||
const Popup = React.memo(({ children, onClose, ...props }) => {
|
||||
const [isOpened, setIsOpened] = useState(false);
|
||||
|
||||
const wrapper = useRef(null);
|
||||
const resizeObserver = useRef(null);
|
||||
|
||||
const handleOpen = useCallback(() => {
|
||||
setIsOpened(true);
|
||||
}, []);
|
||||
|
||||
const handleClose = useCallback(() => {
|
||||
setIsOpened(false);
|
||||
|
||||
if (onClose) {
|
||||
onClose();
|
||||
}
|
||||
}, [onClose]);
|
||||
|
||||
const handleMouseDown = useCallback((event) => {
|
||||
event.stopPropagation();
|
||||
}, []);
|
||||
|
||||
const handleClick = useCallback((event) => {
|
||||
event.stopPropagation();
|
||||
}, []);
|
||||
|
||||
const handleTriggerClick = useCallback(
|
||||
(event) => {
|
||||
event.stopPropagation();
|
||||
|
||||
const { onClick } = children;
|
||||
|
||||
if (onClick) {
|
||||
onClick(event);
|
||||
}
|
||||
},
|
||||
[children],
|
||||
);
|
||||
|
||||
const handleContentRef = useCallback((element) => {
|
||||
if (resizeObserver.current) {
|
||||
resizeObserver.current.disconnect();
|
||||
}
|
||||
|
||||
if (!element) {
|
||||
resizeObserver.current = null;
|
||||
return;
|
||||
}
|
||||
|
||||
resizeObserver.current = new ResizeObserver(() => {
|
||||
if (resizeObserver.current.isInitial) {
|
||||
resizeObserver.current.isInitial = false;
|
||||
return;
|
||||
}
|
||||
|
||||
wrapper.current.positionUpdate();
|
||||
});
|
||||
|
||||
resizeObserver.current.isInitial = true;
|
||||
resizeObserver.current.observe(element);
|
||||
}, []);
|
||||
|
||||
const tigger = React.cloneElement(children, {
|
||||
onClick: handleTriggerClick,
|
||||
});
|
||||
|
||||
return (
|
||||
<SemanticUIPopup
|
||||
basic
|
||||
wide
|
||||
ref={wrapper}
|
||||
trigger={tigger}
|
||||
on="click"
|
||||
open={isOpened}
|
||||
position="bottom left"
|
||||
popperModifiers={[
|
||||
{
|
||||
name: 'preventOverflow',
|
||||
enabled: true,
|
||||
options: {
|
||||
altAxis: true,
|
||||
padding: 20,
|
||||
},
|
||||
},
|
||||
]}
|
||||
className={styles.wrapper}
|
||||
onOpen={handleOpen}
|
||||
onClose={handleClose}
|
||||
onMouseDown={handleMouseDown}
|
||||
onClick={handleClick}
|
||||
{...defaultProps} // eslint-disable-line react/jsx-props-no-spreading
|
||||
>
|
||||
<div ref={handleContentRef}>
|
||||
<Button icon="close" onClick={handleClose} className={styles.closeButton} />
|
||||
{/* eslint-disable-next-line react/jsx-props-no-spreading */}
|
||||
<WrappedComponent {...props} onClose={handleClose} />
|
||||
</div>
|
||||
</SemanticUIPopup>
|
||||
);
|
||||
});
|
||||
|
||||
Popup.propTypes = {
|
||||
children: PropTypes.node.isRequired,
|
||||
onClose: PropTypes.func,
|
||||
};
|
||||
|
||||
Popup.defaultProps = {
|
||||
onClose: undefined,
|
||||
};
|
||||
|
||||
return Popup;
|
||||
};
|
||||
Loading…
Reference in New Issue