IBX-9170: AI Assistant #1385
IBX-9170: AI Assistant #1385
Conversation
GrabowskiM
force-pushed
the
ai-assistant
branch
from
b11091b
to
b242305
Compare
GrabowskiM
force-pushed
the
ai-assistant
branch
from
42c2d1a
to
60e8ef7
Compare
GrabowskiM
force-pushed
the
ai-assistant
branch
from
60e8ef7
to
28e8501
Compare
GrabowskiM
force-pushed
the
ai-assistant
branch
from
25325d8
to
990cbc0
Compare
| onClose: () => {}, | ||
| onItemClick: () => {}, | ||
| positionOffset: () => ({ x: 0, y: 0 }), | ||
| scrollContainer: window.document.body, |
There was a problem hiding this comment.
Could you use helper function getRootDOMElement from https://github.com/ibexa/admin-ui/blob/main/src/bundle/Resources/public/js/scripts/helpers/context.helper.js#L62 ?
| &__item-content { | ||
| position: relative; | ||
| display: flex; | ||
| align-items: center; |
| cursor: pointer; | ||
| padding: calculateRem(9px); | ||
| color: $ibexa-color-dark; | ||
| font-size: calculateRem(14px); |
There was a problem hiding this comment.
we have variable for font-size
| &:disabled, | ||
| &--disabled { | ||
| pointer-events: none; | ||
| cursor: not-allowed; |
There was a problem hiding this comment.
pointer-events: none and cursor: not-allowed, is it working together?
|
|
||
| useEffect(() => { | ||
| if (isDragging) { | ||
| rootDOMElement.addEventListener('mousemove', handleDragging); |
There was a problem hiding this comment.
| rootDOMElement.addEventListener('mousemove', handleDragging); | |
| rootDOMElement.addEventListener('mousemove', handleDragging, false); |
just for consistency
|
|
||
| rootDOMElement.classList.add('ibexa-react-root'); | ||
|
|
||
| if (id) { |
There was a problem hiding this comment.
maybe we should check if there is no repetition of the ID in document?
| return null; | ||
| } | ||
|
|
||
| const groupClassName = createCssClassNames({ |
There was a problem hiding this comment.
I'm not sure if we should use createCssClassNames because this it's only one class and it's not conditional
| @@ -0,0 +1,24 @@ | |||
| const createDynamicRoot = (contextDOMElement = window.document.body, id) => { | |||
There was a problem hiding this comment.
window.document.body you can get this object by function getRootDOMElement from https://github.com/ibexa/admin-ui/blob/main/src/bundle/Resources/public/js/scripts/helpers/context.helper.js. We will avoid possible problems in the future if this code is used outside DXP
| onClose(); | ||
| }; | ||
|
|
||
| window.document.body.addEventListener('click', onInteractionOutside, false); |
There was a problem hiding this comment.
please use getRootDOMElement
| scrollContainer.addEventListener('scroll', calculateAndSetItemsListStyles, false); | ||
|
|
||
| return () => { | ||
| window.document.body.removeEventListener('click', onInteractionOutside); |
There was a problem hiding this comment.
please use getRootDOMElement
|
Description:
This PR provides two reusable react components - draggable dialog (that will be used for AI assistant) and popup menu (based a little on dropdown component, using similar styles as popup menu from vanilla JS)
For QA:
Documentation: