From c1597252b2ff472e16b7680c28674fb59998803a Mon Sep 17 00:00:00 2001 From: dzonidoo Date: Tue, 12 Nov 2024 13:03:55 +0100 Subject: [PATCH] part II - remove component from this repo and use the one from ui framework --- .../authoring-angular-integration.tsx | 4 +- .../search/components/fields/translations.tsx | 3 +- .../annotations/AnnotationInput.tsx | 1 - .../core/get-superdesk-api-implementation.tsx | 2 +- scripts/core/helpers/with-popover.tsx | 42 ----- scripts/core/superdesk-api.d.ts | 1 - .../ui/components/UserPopup/UserPopup.tsx | 3 +- .../content-create-dropdown.tsx | 4 +- scripts/core/ui/components/popupNew.tsx | 157 ------------------ scripts/core/ui/components/position-once.tsx | 9 +- .../ui/components/virtual-lists/select.tsx | 4 +- 11 files changed, 12 insertions(+), 218 deletions(-) delete mode 100644 scripts/core/helpers/with-popover.tsx delete mode 100644 scripts/core/ui/components/popupNew.tsx diff --git a/scripts/apps/authoring-react/authoring-angular-integration.tsx b/scripts/apps/authoring-react/authoring-angular-integration.tsx index d717146c75..028b21fbb9 100644 --- a/scripts/apps/authoring-react/authoring-angular-integration.tsx +++ b/scripts/apps/authoring-react/authoring-angular-integration.tsx @@ -3,7 +3,7 @@ import {assertNever} from 'core/helpers/typescript-helpers'; import {DeskAndStage} from './subcomponents/desk-and-stage'; import {LockInfo} from './subcomponents/lock-info'; -import {Button, ButtonGroup, IconButton, Label, Modal, NavButton, Popover, Spacer} from 'superdesk-ui-framework/react'; +import {Button, ButtonGroup, IconButton, Label, Modal, NavButton, Popover, Spacer, WithPopover} from 'superdesk-ui-framework/react'; import { IArticle, ITopBarWidget, @@ -19,7 +19,6 @@ import {sdApi} from 'api'; import ng from 'core/services/ng'; import {AuthoringIntegrationWrapper} from './authoring-integration-wrapper'; import {MarkedDesks} from './toolbar/mark-for-desks/mark-for-desks-popover'; -import {WithPopover} from 'core/helpers/with-popover'; import {HighlightsCardContent} from './toolbar/highlights-management'; import { authoringStorageIArticle, @@ -168,7 +167,6 @@ function getInlineToolbarActions( /> )} placement="right-end" - zIndex={1050} > { (togglePopup) => ( diff --git a/scripts/apps/search/components/fields/translations.tsx b/scripts/apps/search/components/fields/translations.tsx index 070268951a..95abefd501 100644 --- a/scripts/apps/search/components/fields/translations.tsx +++ b/scripts/apps/search/components/fields/translations.tsx @@ -2,7 +2,7 @@ import React from 'react'; import {gettext, gettextPlural} from 'core/utils'; import {IArticle} from 'superdesk-api'; import {TranslationsListWrapper} from '../translations-list-wrapper'; -import {showPopup} from 'core/ui/components/popupNew'; +import {showPopup} from 'superdesk-ui-framework/react'; interface IProps { item: IArticle; @@ -41,7 +41,6 @@ export class Translations extends React.PureComponent { close={closePopup} /> ), - 100, ); } diff --git a/scripts/core/editor3/components/annotations/AnnotationInput.tsx b/scripts/core/editor3/components/annotations/AnnotationInput.tsx index c5591d91b3..959be82b08 100644 --- a/scripts/core/editor3/components/annotations/AnnotationInput.tsx +++ b/scripts/core/editor3/components/annotations/AnnotationInput.tsx @@ -298,7 +298,6 @@ class AnnotationInputBody extends React.Component { ref={(component) => { this.positionerRef = component; }} - zIndex={1051} >
diff --git a/scripts/core/get-superdesk-api-implementation.tsx b/scripts/core/get-superdesk-api-implementation.tsx index 786d2d9642..67b0aab516 100644 --- a/scripts/core/get-superdesk-api-implementation.tsx +++ b/scripts/core/get-superdesk-api-implementation.tsx @@ -109,7 +109,6 @@ import { LockInfo, } from 'apps/authoring-react/subcomponents/lock-info-generic'; import {tryLocking, tryUnlocking} from './helpers/locking-helpers'; -import {showPopup} from './ui/components/popupNew'; import {Card} from './ui/components/Card'; import {getTextColor} from './helpers/utils'; import {showModal} from '@superdesk/common'; @@ -120,6 +119,7 @@ import {getLabelNameResolver} from 'apps/workspace/helpers/getLabelForFieldId'; import {getSortedFields, getSortedFieldsFiltered} from 'apps/authoring/preview/utils'; import {editor3ToOperationalFormat} from 'apps/authoring-react/fields/editor3'; import {prepareSuperdeskQuery} from './helpers/universal-query'; +import {showPopup} from 'superdesk-ui-framework/react'; export function openArticle( id: IArticle['_id'], diff --git a/scripts/core/helpers/with-popover.tsx b/scripts/core/helpers/with-popover.tsx deleted file mode 100644 index 32f810ef1b..0000000000 --- a/scripts/core/helpers/with-popover.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import React, {ReactNode} from 'react'; -import {Placement} from '@popperjs/core'; -import {showPopup} from 'core/ui/components/popupNew'; - -interface IProps { - children(toggle: (referenceElement: HTMLElement) => void): ReactNode; - placement: Placement; - component: React.ComponentType<{closePopup(): void}>; - zIndex?: number; - closeOnHoverEnd?: boolean; - onClose?: () => void; -} - -export class WithPopover extends React.PureComponent { - private closePopup?: () => void; - - constructor(props: IProps) { - super(props); - - this.togglePopup = this.togglePopup.bind(this); - } - - togglePopup(referenceElement: HTMLElement) { - if (this.closePopup != null) { - this.closePopup(); - this.closePopup = undefined; - } else { - this.closePopup = showPopup( - referenceElement, - this.props.placement, - this.props.component, - this.props.zIndex, - this.props.closeOnHoverEnd, - this.props.onClose, - ).close; - } - } - - render(): React.ReactNode { - return this.props.children(this.togglePopup); - } -} diff --git a/scripts/core/superdesk-api.d.ts b/scripts/core/superdesk-api.d.ts index 3c02015920..31a119ee25 100644 --- a/scripts/core/superdesk-api.d.ts +++ b/scripts/core/superdesk-api.d.ts @@ -3081,7 +3081,6 @@ declare module 'superdesk-api' { referenceElement: HTMLElement, placement: import('@popperjs/core').Placement, Component: React.ComponentType<{closePopup(): void}>, - zIndex?: number, closeOnHoverEnd?: boolean, onClose?: () => void, ): {close: () => void}; diff --git a/scripts/core/ui/components/UserPopup/UserPopup.tsx b/scripts/core/ui/components/UserPopup/UserPopup.tsx index e1608f89ab..5454797892 100644 --- a/scripts/core/ui/components/UserPopup/UserPopup.tsx +++ b/scripts/core/ui/components/UserPopup/UserPopup.tsx @@ -1,8 +1,8 @@ import React from 'react'; -import {showPopup} from 'core/ui/components/popupNew'; import {IUser} from 'superdesk-api'; import {UserAvatar} from 'apps/users/components/UserAvatar'; import {gettext} from 'core/utils'; +import {showPopup} from 'superdesk-ui-framework/react'; interface IProps { user: IUser; @@ -28,7 +28,6 @@ const UserPopup = ({mentionName, user}: IProps) => {
), - 100, true, ); }; diff --git a/scripts/core/ui/components/content-create-dropdown/content-create-dropdown.tsx b/scripts/core/ui/components/content-create-dropdown/content-create-dropdown.tsx index adf1b45f75..55138a8c3e 100644 --- a/scripts/core/ui/components/content-create-dropdown/content-create-dropdown.tsx +++ b/scripts/core/ui/components/content-create-dropdown/content-create-dropdown.tsx @@ -2,10 +2,9 @@ import React from 'react'; import {IArticle} from 'superdesk-api'; -import {Button} from 'superdesk-ui-framework/react'; +import {Button, showPopup} from 'superdesk-ui-framework/react'; import ng from 'core/services/ng'; import {gettext} from 'core/utils'; -import {showPopup} from '../popupNew'; import {InitialView} from './initial-view'; import {DropZone3} from '../drop-zone-3'; import {getSuperdeskType} from 'utils/dragging'; @@ -78,7 +77,6 @@ export class ContentCreateDropdown extends React.PureComponent { onCreate={this.props.onCreate} /> ), - 1050, ); }} /> diff --git a/scripts/core/ui/components/popupNew.tsx b/scripts/core/ui/components/popupNew.tsx deleted file mode 100644 index 66b0f697f4..0000000000 --- a/scripts/core/ui/components/popupNew.tsx +++ /dev/null @@ -1,157 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import {throttle} from 'lodash'; -import {createPopper, Instance as PopperInstance, Placement} from '@popperjs/core/'; -import maxSize from 'popper-max-size-modifier'; -import {applyMaxSize, flipCustomModifier} from 'core/popper-utils'; - -export interface IPropsPositioner { - referenceElement: HTMLElement; - placement: Placement; - zIndex?: number; - onClose(): void; - closeOnHoverEnd?: boolean; -} - -export class PopupPositioner extends React.PureComponent { - private wrapperEl: HTMLDivElement; - private popper: PopperInstance; - - constructor(props: IPropsPositioner) { - super(props); - - this.closeOnClick = this.closeOnClick.bind(this); - this.closeOnScroll = throttle(this.closeOnScroll.bind(this), 200); - this.closeOnMouseLeave = this.closeOnMouseLeave.bind(this); - } - - closeOnClick(event: MouseEvent) { - if (this.wrapperEl == null) { - return; - } - - if ( - this.props.referenceElement.contains(event.target as Node) !== true - && this.wrapperEl.contains(event.target as Node) !== true - ) { - this.props.onClose(); - } - } - - closeOnScroll(event: MouseEvent) { - if (this.wrapperEl == null) { - return; - } - - if (this.wrapperEl.contains(event.target as Node) !== true) { - this.props.onClose(); - } - } - - closeOnMouseLeave(event: MouseEvent) { - if (this.wrapperEl == null) { - return; - } - - if (this.wrapperEl.contains(event.target as Node) !== true) { - this.props.onClose(); - } - } - - componentDidMount() { - window.addEventListener('click', this.closeOnClick, {capture: true}); - window.addEventListener('scroll', this.closeOnScroll, true); - - if (this.props.closeOnHoverEnd && this.wrapperEl != null) { - this.props.referenceElement.addEventListener('mouseleave', this.closeOnMouseLeave); - this.wrapperEl.addEventListener('mouseleave', this.closeOnMouseLeave); - } - - if (this.wrapperEl != null) { - /** - * Wait until referenceElement renders so createPopper - * can take its dimensions into account. - */ - setTimeout(() => { - this.popper = createPopper( - this.props.referenceElement, - this.wrapperEl, - { - placement: this.props.placement, - modifiers: [ - maxSize, - applyMaxSize, - flipCustomModifier, - ], - }, - ); - }, 50); - } - } - - componentWillUnmount() { - window.removeEventListener('click', this.closeOnClick); - window.removeEventListener('scroll', this.closeOnScroll, true); - - if (this.props.closeOnHoverEnd && this.wrapperEl != null) { - this.props.referenceElement.removeEventListener('mouseleave', this.closeOnMouseLeave); - this.wrapperEl.removeEventListener('mouseleave', this.closeOnMouseLeave); - } - - this.popper?.destroy?.(); - } - - render() { - return ( -
{ - this.wrapperEl = el; - }} - style={{zIndex: this.props.zIndex ?? 1, position: 'absolute', insetInlineStart: '-100vw'}} - > - {this.props.children} -
- ); - } -} - -/** - * The popup will remove itself if click/scroll events are detected outside the popup. - */ -export function showPopup( - referenceElement: HTMLElement, - placement: Placement, - Component: React.ComponentType<{closePopup(): void}>, - zIndex?: number, - closeOnHoverEnd?: boolean, - onClose?: () => void, -): {close: () => void} { - const el = document.createElement('div'); - - document.body.appendChild(el); - - const closeFn = () => { - ReactDOM.unmountComponentAtNode(el); - el.remove(); - onClose?.(); - }; - - ReactDOM.render( - ( - - - - ), - el, - ); - - return {close: closeFn}; -} diff --git a/scripts/core/ui/components/position-once.tsx b/scripts/core/ui/components/position-once.tsx index cc2120d168..731865923b 100644 --- a/scripts/core/ui/components/position-once.tsx +++ b/scripts/core/ui/components/position-once.tsx @@ -1,9 +1,13 @@ +import {Placement} from '@popperjs/core'; import React from 'react'; import ReactDOM from 'react-dom'; -import {IPropsPositioner, PopupPositioner} from './popupNew'; +import {PopupPositioner} from 'superdesk-ui-framework/react'; -interface IProps extends Omit { +interface IProps { delayed?: boolean; + placement: Placement; + onClose(): void; + closeOnHoverEnd?: boolean; } interface IState { @@ -41,7 +45,6 @@ export class PositionInline extends React.PureComponent { {this.props.children} diff --git a/scripts/core/ui/components/virtual-lists/select.tsx b/scripts/core/ui/components/virtual-lists/select.tsx index 12eb584f31..77905710d0 100644 --- a/scripts/core/ui/components/virtual-lists/select.tsx +++ b/scripts/core/ui/components/virtual-lists/select.tsx @@ -1,12 +1,11 @@ import React from 'react'; import {SuperdeskReactComponent} from 'core/SuperdeskReactComponent'; -import {showPopup} from '../popupNew'; import {IBaseRestApiResponse, IPropsSelectFromRemote, ISuperdeskQuery} from 'superdesk-api'; import {VirtualListFromQuery} from './virtual-list-from-query'; import {gettext} from 'core/utils'; import {InputLabel} from '../input-label'; import {SpacerBlock} from '../Spacer'; -import {IconButton} from 'superdesk-ui-framework'; +import {IconButton, showPopup} from 'superdesk-ui-framework/react'; interface IState { selected: 'loading' | T | null; @@ -154,7 +153,6 @@ export class SelectFromEndpoint /> ), - 3000, undefined, () => { this.lastPopup = null;