From d975b2d07a765b1828873e3662a7356f4d2c03f7 Mon Sep 17 00:00:00 2001 From: Maksim Eltyshev Date: Tue, 24 Jan 2023 18:53:13 +0100 Subject: [PATCH] ref: Creating popups with hook, fix translation keys passing --- .../src/components/BoardActions/Filters.jsx | 16 +-- .../src/components/BoardMembershipsPopup.jsx | 5 - .../src/components/Boards/AddPopup/index.js | 3 - .../AddPopup.jsx => AddStep/AddStep.jsx} | 5 +- .../AddStep.module.scss} | 0 .../{AddPopup => AddStep}/ImportStep.jsx | 0 .../ImportStep.module.scss | 0 client/src/components/Boards/AddStep/index.js | 3 + client/src/components/Boards/Boards.jsx | 9 +- .../Boards/{EditPopup.jsx => EditStep.jsx} | 13 +- ...Popup.module.scss => EditStep.module.scss} | 0 .../{ActionsPopup.jsx => ActionsStep.jsx} | 13 +- ...up.module.scss => ActionsStep.module.scss} | 0 client/src/components/Card/Card.jsx | 5 +- .../CardModal/Activities/ItemComment.jsx | 13 +- ...mentAddPopup.jsx => AttachmentAddStep.jsx} | 5 +- ...ule.scss => AttachmentAddStep.module.scss} | 0 .../{EditPopup.jsx => EditStep.jsx} | 13 +- ...Popup.module.scss => EditStep.module.scss} | 0 .../components/CardModal/Attachments/Item.jsx | 5 +- client/src/components/CardModal/CardModal.jsx | 31 +++-- .../{ActionsPopup.jsx => ActionsStep.jsx} | 13 +- ...up.module.scss => ActionsStep.module.scss} | 0 .../src/components/CardModal/Tasks/Item.jsx | 5 +- client/src/components/CardMovePopup.jsx | 5 - client/src/components/DeletePopup.jsx | 5 - .../src/components/DeleteStep/DeleteStep.jsx | 27 ++-- client/src/components/DueDateEditPopup.jsx | 5 - client/src/components/Header/Header.jsx | 12 +- ...cationsPopup.jsx => NotificationsStep.jsx} | 7 +- ...ule.scss => NotificationsStep.module.scss} | 0 client/src/components/LabelsPopup.jsx | 5 - client/src/components/LabelsStep/EditStep.jsx | 8 +- .../{ActionsPopup.jsx => ActionsStep.jsx} | 13 +- ...up.module.scss => ActionsStep.module.scss} | 0 client/src/components/List/List.jsx | 5 +- .../{ActionsPopup.jsx => ActionsStep.jsx} | 24 ++-- ...up.module.scss => ActionsStep.module.scss} | 0 .../components/Memberships/AddPopup/index.js | 3 - .../AddPopup.jsx => AddStep/AddStep.jsx} | 5 +- .../AddStep.module.scss} | 0 .../{AddPopup => AddStep}/UserItem.jsx | 0 .../UserItem.module.scss | 0 .../components/Memberships/AddStep/index.js | 3 + .../components/Memberships/Memberships.jsx | 8 +- .../GeneralPane/GeneralPane.jsx | 13 +- client/src/components/TimerEditPopup.jsx | 5 - client/src/components/UserAddPopup/index.js | 3 - .../UserAddStep.jsx} | 5 +- .../UserAddStep.module.scss} | 0 client/src/components/UserAddStep/index.js | 3 + client/src/components/UserEmailEditPopup.jsx | 5 - .../src/components/UserPasswordEditPopup.jsx | 5 - client/src/components/UserPopup/index.js | 3 - .../AccountPane/AccountPane.jsx | 14 +- ...AvatarEditPopup.jsx => AvatarEditStep.jsx} | 5 +- ...module.scss => AvatarEditStep.module.scss} | 0 .../UserPopup.jsx => UserStep/UserStep.jsx} | 7 +- .../UserStep.module.scss} | 0 client/src/components/UserStep/index.js | 3 + .../src/components/UserUsernameEditPopup.jsx | 5 - .../{ActionsPopup.jsx => ActionsStep.jsx} | 13 +- ...up.module.scss => ActionsStep.module.scss} | 0 .../src/components/UsersModal/Item/Item.jsx | 5 +- .../src/components/UsersModal/UsersModal.jsx | 5 +- ...upContainer.js => UserAddStepContainer.js} | 4 +- client/src/lib/popup/index.js | 4 +- client/src/lib/popup/use-popup.jsx | 122 ++++++++++++++++++ client/src/lib/popup/with-popup.jsx | 120 ----------------- 69 files changed, 309 insertions(+), 332 deletions(-) delete mode 100644 client/src/components/BoardMembershipsPopup.jsx delete mode 100644 client/src/components/Boards/AddPopup/index.js rename client/src/components/Boards/{AddPopup/AddPopup.jsx => AddStep/AddStep.jsx} (95%) rename client/src/components/Boards/{AddPopup/AddPopup.module.scss => AddStep/AddStep.module.scss} (100%) rename client/src/components/Boards/{AddPopup => AddStep}/ImportStep.jsx (100%) rename client/src/components/Boards/{AddPopup => AddStep}/ImportStep.module.scss (100%) create mode 100644 client/src/components/Boards/AddStep/index.js rename client/src/components/Boards/{EditPopup.jsx => EditStep.jsx} (87%) rename client/src/components/Boards/{EditPopup.module.scss => EditStep.module.scss} (100%) rename client/src/components/Card/{ActionsPopup.jsx => ActionsStep.jsx} (95%) rename client/src/components/Card/{ActionsPopup.module.scss => ActionsStep.module.scss} (100%) rename client/src/components/CardModal/{AttachmentAddPopup.jsx => AttachmentAddStep.jsx} (89%) rename client/src/components/CardModal/{AttachmentAddPopup.module.scss => AttachmentAddStep.module.scss} (100%) rename client/src/components/CardModal/Attachments/{EditPopup.jsx => EditStep.jsx} (87%) rename client/src/components/CardModal/Attachments/{EditPopup.module.scss => EditStep.module.scss} (100%) rename client/src/components/CardModal/Tasks/{ActionsPopup.jsx => ActionsStep.jsx} (83%) rename client/src/components/CardModal/Tasks/{ActionsPopup.module.scss => ActionsStep.module.scss} (100%) delete mode 100644 client/src/components/CardMovePopup.jsx delete mode 100644 client/src/components/DeletePopup.jsx delete mode 100644 client/src/components/DueDateEditPopup.jsx rename client/src/components/Header/{NotificationsPopup.jsx => NotificationsStep.jsx} (95%) rename client/src/components/Header/{NotificationsPopup.module.scss => NotificationsStep.module.scss} (100%) delete mode 100644 client/src/components/LabelsPopup.jsx rename client/src/components/List/{ActionsPopup.jsx => ActionsStep.jsx} (86%) rename client/src/components/List/{ActionsPopup.module.scss => ActionsStep.module.scss} (100%) rename client/src/components/Memberships/{ActionsPopup.jsx => ActionsStep.jsx} (89%) rename client/src/components/Memberships/{ActionsPopup.module.scss => ActionsStep.module.scss} (100%) delete mode 100644 client/src/components/Memberships/AddPopup/index.js rename client/src/components/Memberships/{AddPopup/AddPopup.jsx => AddStep/AddStep.jsx} (96%) rename client/src/components/Memberships/{AddPopup/AddPopup.module.scss => AddStep/AddStep.module.scss} (100%) rename client/src/components/Memberships/{AddPopup => AddStep}/UserItem.jsx (100%) rename client/src/components/Memberships/{AddPopup => AddStep}/UserItem.module.scss (100%) create mode 100644 client/src/components/Memberships/AddStep/index.js delete mode 100644 client/src/components/TimerEditPopup.jsx delete mode 100644 client/src/components/UserAddPopup/index.js rename client/src/components/{UserAddPopup/UserAddPopup.jsx => UserAddStep/UserAddStep.jsx} (97%) rename client/src/components/{UserAddPopup/UserAddPopup.module.scss => UserAddStep/UserAddStep.module.scss} (100%) create mode 100644 client/src/components/UserAddStep/index.js delete mode 100644 client/src/components/UserEmailEditPopup.jsx delete mode 100644 client/src/components/UserPasswordEditPopup.jsx delete mode 100755 client/src/components/UserPopup/index.js rename client/src/components/UserSettingsModal/AccountPane/{AvatarEditPopup.jsx => AvatarEditStep.jsx} (91%) rename client/src/components/UserSettingsModal/AccountPane/{AvatarEditPopup.module.scss => AvatarEditStep.module.scss} (100%) rename client/src/components/{UserPopup/UserPopup.jsx => UserStep/UserStep.jsx} (90%) rename client/src/components/{UserPopup/UserPopup.module.scss => UserStep/UserStep.module.scss} (100%) create mode 100755 client/src/components/UserStep/index.js delete mode 100644 client/src/components/UserUsernameEditPopup.jsx rename client/src/components/UsersModal/Item/{ActionsPopup.jsx => ActionsStep.jsx} (93%) rename client/src/components/UsersModal/Item/{ActionsPopup.module.scss => ActionsStep.module.scss} (100%) rename client/src/containers/{UserAddPopupContainer.js => UserAddStepContainer.js} (89%) create mode 100644 client/src/lib/popup/use-popup.jsx delete mode 100755 client/src/lib/popup/with-popup.jsx diff --git a/client/src/components/BoardActions/Filters.jsx b/client/src/components/BoardActions/Filters.jsx index c1bd7cc0..c4e61c6f 100644 --- a/client/src/components/BoardActions/Filters.jsx +++ b/client/src/components/BoardActions/Filters.jsx @@ -1,11 +1,12 @@ import React, { useCallback } from 'react'; import PropTypes from 'prop-types'; import { useTranslation } from 'react-i18next'; +import { usePopup } from '../../lib/popup'; import User from '../User'; import Label from '../Label'; -import BoardMembershipsPopup from '../BoardMembershipsPopup'; -import LabelsPopup from '../LabelsPopup'; +import BoardMembershipsStep from '../BoardMembershipsStep'; +import LabelsStep from '../LabelsStep'; import styles from './Filters.module.scss'; @@ -41,15 +42,16 @@ const Filters = React.memo( [onLabelRemove], ); + const BoardMembershipsPopup = usePopup(BoardMembershipsStep); + const LabelsPopup = usePopup(LabelsStep); + return ( <> user.id)} - title={t('common.filterByMembers', { - context: 'title', - })} + title="common.filterByMembers" onUserSelect={onUserAdd} onUserDeselect={onUserRemove} > @@ -73,9 +75,7 @@ const Filters = React.memo( label.id)} - title={t('common.filterByLabels', { - context: 'title', - })} + title="common.filterByLabels" canEdit={canEdit} onSelect={onLabelAdd} onDeselect={onLabelRemove} diff --git a/client/src/components/BoardMembershipsPopup.jsx b/client/src/components/BoardMembershipsPopup.jsx deleted file mode 100644 index e092180c..00000000 --- a/client/src/components/BoardMembershipsPopup.jsx +++ /dev/null @@ -1,5 +0,0 @@ -import { withPopup } from '../lib/popup'; - -import BoardMembershipsStep from './BoardMembershipsStep'; - -export default withPopup(BoardMembershipsStep); diff --git a/client/src/components/Boards/AddPopup/index.js b/client/src/components/Boards/AddPopup/index.js deleted file mode 100644 index d0f632de..00000000 --- a/client/src/components/Boards/AddPopup/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import AddPopup from './AddPopup'; - -export default AddPopup; diff --git a/client/src/components/Boards/AddPopup/AddPopup.jsx b/client/src/components/Boards/AddStep/AddStep.jsx similarity index 95% rename from client/src/components/Boards/AddPopup/AddPopup.jsx rename to client/src/components/Boards/AddStep/AddStep.jsx index 38de57da..35f0d001 100755 --- a/client/src/components/Boards/AddPopup/AddPopup.jsx +++ b/client/src/components/Boards/AddStep/AddStep.jsx @@ -3,13 +3,12 @@ import PropTypes from 'prop-types'; import { useTranslation } from 'react-i18next'; import { Button, Form, Icon } from 'semantic-ui-react'; import { useDidUpdate, useToggle } from '../../../lib/hooks'; -import { withPopup } from '../../../lib/popup'; import { Input, Popup } from '../../../lib/custom-ui'; import { useForm, useSteps } from '../../../hooks'; import ImportStep from './ImportStep'; -import styles from './AddPopup.module.scss'; +import styles from './AddStep.module.scss'; const StepTypes = { IMPORT: 'IMPORT', @@ -114,4 +113,4 @@ AddStep.propTypes = { onClose: PropTypes.func.isRequired, }; -export default withPopup(AddStep); +export default AddStep; diff --git a/client/src/components/Boards/AddPopup/AddPopup.module.scss b/client/src/components/Boards/AddStep/AddStep.module.scss similarity index 100% rename from client/src/components/Boards/AddPopup/AddPopup.module.scss rename to client/src/components/Boards/AddStep/AddStep.module.scss diff --git a/client/src/components/Boards/AddPopup/ImportStep.jsx b/client/src/components/Boards/AddStep/ImportStep.jsx similarity index 100% rename from client/src/components/Boards/AddPopup/ImportStep.jsx rename to client/src/components/Boards/AddStep/ImportStep.jsx diff --git a/client/src/components/Boards/AddPopup/ImportStep.module.scss b/client/src/components/Boards/AddStep/ImportStep.module.scss similarity index 100% rename from client/src/components/Boards/AddPopup/ImportStep.module.scss rename to client/src/components/Boards/AddStep/ImportStep.module.scss diff --git a/client/src/components/Boards/AddStep/index.js b/client/src/components/Boards/AddStep/index.js new file mode 100644 index 00000000..60fa80a7 --- /dev/null +++ b/client/src/components/Boards/AddStep/index.js @@ -0,0 +1,3 @@ +import AddStep from './AddStep'; + +export default AddStep; diff --git a/client/src/components/Boards/Boards.jsx b/client/src/components/Boards/Boards.jsx index fbde7ede..fad20475 100755 --- a/client/src/components/Boards/Boards.jsx +++ b/client/src/components/Boards/Boards.jsx @@ -5,12 +5,12 @@ import classNames from 'classnames'; import { Link } from 'react-router-dom'; import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd'; import { Button, Icon } from 'semantic-ui-react'; -import { closePopup } from '../../lib/popup'; +import { closePopup, usePopup } from '../../lib/popup'; import Paths from '../../constants/Paths'; import DroppableTypes from '../../constants/DroppableTypes'; -import AddPopup from './AddPopup'; -import EditPopup from './EditPopup'; +import AddStep from './AddStep'; +import EditStep from './EditStep'; import styles from './Boards.module.scss'; @@ -52,6 +52,9 @@ const Boards = React.memo(({ items, currentId, canEdit, onCreate, onUpdate, onMo [onDelete], ); + const AddPopup = usePopup(AddStep); + const EditPopup = usePopup(EditStep); + const itemsNode = items.map((item, index) => ( { if (step && step.type === StepTypes.DELETE) { return ( @@ -104,4 +101,4 @@ EditStep.propTypes = { onClose: PropTypes.func.isRequired, }; -export default withPopup(EditStep); +export default EditStep; diff --git a/client/src/components/Boards/EditPopup.module.scss b/client/src/components/Boards/EditStep.module.scss similarity index 100% rename from client/src/components/Boards/EditPopup.module.scss rename to client/src/components/Boards/EditStep.module.scss diff --git a/client/src/components/Card/ActionsPopup.jsx b/client/src/components/Card/ActionsStep.jsx similarity index 95% rename from client/src/components/Card/ActionsPopup.jsx rename to client/src/components/Card/ActionsStep.jsx index 6140b36d..559dc2c2 100644 --- a/client/src/components/Card/ActionsPopup.jsx +++ b/client/src/components/Card/ActionsStep.jsx @@ -3,7 +3,6 @@ import React, { useCallback } from 'react'; import PropTypes from 'prop-types'; import { useTranslation } from 'react-i18next'; import { Menu } from 'semantic-ui-react'; -import { withPopup } from '../../lib/popup'; import { Popup } from '../../lib/custom-ui'; import { useSteps } from '../../hooks'; @@ -14,7 +13,7 @@ import TimerEditStep from '../TimerEditStep'; import CardMoveStep from '../CardMoveStep'; import DeleteStep from '../DeleteStep'; -import styles from './ActionsPopup.module.scss'; +import styles from './ActionsStep.module.scss'; const StepTypes = { USERS: 'USERS', @@ -158,11 +157,9 @@ const ActionsStep = React.memo( case StepTypes.DELETE: return ( @@ -248,4 +245,4 @@ ActionsStep.propTypes = { onClose: PropTypes.func.isRequired, }; -export default withPopup(ActionsStep); +export default ActionsStep; diff --git a/client/src/components/Card/ActionsPopup.module.scss b/client/src/components/Card/ActionsStep.module.scss similarity index 100% rename from client/src/components/Card/ActionsPopup.module.scss rename to client/src/components/Card/ActionsStep.module.scss diff --git a/client/src/components/Card/Card.jsx b/client/src/components/Card/Card.jsx index f689dcda..86e26d5f 100755 --- a/client/src/components/Card/Card.jsx +++ b/client/src/components/Card/Card.jsx @@ -4,12 +4,13 @@ import classNames from 'classnames'; import { Button, Icon } from 'semantic-ui-react'; import { Link } from 'react-router-dom'; import { Draggable } from 'react-beautiful-dnd'; +import { usePopup } from '../../lib/popup'; import { startTimer, stopTimer } from '../../utils/timer'; import Paths from '../../constants/Paths'; import Tasks from './Tasks'; import NameEdit from './NameEdit'; -import ActionsPopup from './ActionsPopup'; +import ActionsStep from './ActionsStep'; import User from '../User'; import Label from '../Label'; import DueDate from '../DueDate'; @@ -83,6 +84,8 @@ const Card = React.memo( nameEdit.current.open(); }, []); + const ActionsPopup = usePopup(ActionsStep); + const contentNode = ( <> {coverUrl && } diff --git a/client/src/components/CardModal/Activities/ItemComment.jsx b/client/src/components/CardModal/Activities/ItemComment.jsx index 1c56e767..488f0d8d 100755 --- a/client/src/components/CardModal/Activities/ItemComment.jsx +++ b/client/src/components/CardModal/Activities/ItemComment.jsx @@ -3,11 +3,12 @@ import PropTypes from 'prop-types'; import classNames from 'classnames'; import { useTranslation } from 'react-i18next'; import { Comment } from 'semantic-ui-react'; +import { usePopup } from '../../../lib/popup'; import { Markdown } from '../../../lib/custom-ui'; import CommentEdit from './CommentEdit'; import User from '../../User'; -import DeletePopup from '../../DeletePopup'; +import DeleteStep from '../../DeleteStep'; import styles from './ItemComment.module.scss'; @@ -21,6 +22,8 @@ const ItemComment = React.memo( commentEdit.current.open(); }, []); + const DeletePopup = usePopup(DeleteStep); + return ( @@ -50,11 +53,9 @@ const ItemComment = React.memo( onClick={handleEditClick} /> { const [t] = useTranslation(); @@ -51,4 +50,4 @@ AttachmentAddStep.propTypes = { onClose: PropTypes.func.isRequired, }; -export default withPopup(AttachmentAddStep); +export default AttachmentAddStep; diff --git a/client/src/components/CardModal/AttachmentAddPopup.module.scss b/client/src/components/CardModal/AttachmentAddStep.module.scss similarity index 100% rename from client/src/components/CardModal/AttachmentAddPopup.module.scss rename to client/src/components/CardModal/AttachmentAddStep.module.scss diff --git a/client/src/components/CardModal/Attachments/EditPopup.jsx b/client/src/components/CardModal/Attachments/EditStep.jsx similarity index 87% rename from client/src/components/CardModal/Attachments/EditPopup.jsx rename to client/src/components/CardModal/Attachments/EditStep.jsx index 287cba5c..1a618e6d 100755 --- a/client/src/components/CardModal/Attachments/EditPopup.jsx +++ b/client/src/components/CardModal/Attachments/EditStep.jsx @@ -3,13 +3,12 @@ import React, { useCallback, useEffect, useRef } from 'react'; import PropTypes from 'prop-types'; import { useTranslation } from 'react-i18next'; import { Button, Form } from 'semantic-ui-react'; -import { withPopup } from '../../../lib/popup'; import { Input, Popup } from '../../../lib/custom-ui'; import { useForm, useSteps } from '../../../hooks'; import DeleteStep from '../../DeleteStep'; -import styles from './EditPopup.module.scss'; +import styles from './EditStep.module.scss'; const StepTypes = { DELETE: 'DELETE', @@ -56,11 +55,9 @@ const EditStep = React.memo(({ defaultData, onUpdate, onDelete, onClose }) => { if (step && step.type === StepTypes.DELETE) { return ( @@ -104,4 +101,4 @@ EditStep.propTypes = { onClose: PropTypes.func.isRequired, }; -export default withPopup(EditStep); +export default EditStep; diff --git a/client/src/components/CardModal/Attachments/EditPopup.module.scss b/client/src/components/CardModal/Attachments/EditStep.module.scss similarity index 100% rename from client/src/components/CardModal/Attachments/EditPopup.module.scss rename to client/src/components/CardModal/Attachments/EditStep.module.scss diff --git a/client/src/components/CardModal/Attachments/Item.jsx b/client/src/components/CardModal/Attachments/Item.jsx index 45866729..60ffdeae 100644 --- a/client/src/components/CardModal/Attachments/Item.jsx +++ b/client/src/components/CardModal/Attachments/Item.jsx @@ -3,8 +3,9 @@ import PropTypes from 'prop-types'; import classNames from 'classnames'; import { useTranslation } from 'react-i18next'; import { Button, Icon, Label, Loader } from 'semantic-ui-react'; +import { usePopup } from '../../../lib/popup'; -import EditPopup from './EditPopup'; +import EditStep from './EditStep'; import styles from './Item.module.scss'; @@ -49,6 +50,8 @@ const Item = React.forwardRef( [isCover, onCoverSelect, onCoverDeselect], ); + const EditPopup = usePopup(EditStep); + if (!isPersisted) { return (
diff --git a/client/src/components/CardModal/CardModal.jsx b/client/src/components/CardModal/CardModal.jsx index 011f2452..6370fdb6 100755 --- a/client/src/components/CardModal/CardModal.jsx +++ b/client/src/components/CardModal/CardModal.jsx @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import classNames from 'classnames'; import { useTranslation } from 'react-i18next'; import { Button, Grid, Icon, Modal } from 'semantic-ui-react'; +import { usePopup } from '../../lib/popup'; import { Markdown } from '../../lib/custom-ui'; import { startTimer, stopTimer } from '../../utils/timer'; @@ -11,18 +12,18 @@ import DescriptionEdit from './DescriptionEdit'; import Tasks from './Tasks'; import Attachments from './Attachments'; import AttachmentAddZone from './AttachmentAddZone'; -import AttachmentAddPopup from './AttachmentAddPopup'; +import AttachmentAddStep from './AttachmentAddStep'; import Activities from './Activities'; import User from '../User'; import Label from '../Label'; import DueDate from '../DueDate'; import Timer from '../Timer'; -import BoardMembershipsPopup from '../BoardMembershipsPopup'; -import LabelsPopup from '../LabelsPopup'; -import DueDateEditPopup from '../DueDateEditPopup'; -import TimerEditPopup from '../TimerEditPopup'; -import CardMovePopup from '../CardMovePopup'; -import DeletePopup from '../DeletePopup'; +import BoardMembershipsStep from '../BoardMembershipsStep'; +import LabelsStep from '../LabelsStep'; +import DueDateEditStep from '../DueDateEditStep'; +import TimerEditStep from '../TimerEditStep'; +import CardMoveStep from '../CardMoveStep'; +import DeleteStep from '../DeleteStep'; import styles from './CardModal.module.scss'; @@ -155,6 +156,14 @@ const CardModal = React.memo( onClose(); }, [onClose]); + const AttachmentAddPopup = usePopup(AttachmentAddStep); + const BoardMembershipsPopup = usePopup(BoardMembershipsStep); + const LabelsPopup = usePopup(LabelsStep); + const DueDateEditPopup = usePopup(DueDateEditStep); + const TimerEditPopup = usePopup(TimerEditStep); + const CardMovePopup = usePopup(CardMoveStep); + const DeletePopup = usePopup(DeleteStep); + const userIds = users.map((user) => user.id); const labelIds = labels.map((label) => label.id); @@ -482,11 +491,9 @@ const CardModal = React.memo(
+ + ); + }); + + Popup.propTypes = { + children: PropTypes.node.isRequired, + onClose: PropTypes.func, + }; + + Popup.defaultProps = { + onClose: undefined, + }; + + return Popup; + }, [props]); +}; diff --git a/client/src/lib/popup/with-popup.jsx b/client/src/lib/popup/with-popup.jsx deleted file mode 100755 index 6c561bf0..00000000 --- a/client/src/lib/popup/with-popup.jsx +++ /dev/null @@ -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 ( - -
-
- - ); - }); - - Popup.propTypes = { - children: PropTypes.node.isRequired, - onClose: PropTypes.func, - }; - - Popup.defaultProps = { - onClose: undefined, - }; - - return Popup; -};