mukeshs/twenty_crm
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix UI components (#2771)

Browse Source 
* fixes radio button's label (issue #2566)

* fixes entity title double text input's width (issue #2562)

* fixed checkmark placement on color scheme card

* fix failing CI Docs

* fixes computed node dimensions and color scheme card

* fix color scheme card background

* fix color scheme card background

* updated color scheme card docs

* Fix

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Nimra Ahmed
2023-11-30 16:13:05 +05:00
committed by GitHub
parent 976f86093c
commit 0008c4b9d5
9 changed files with 43 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
front/src/modules/ui/utilities/dimensions/components/ComputeNodeDimensions.tsx
View File

@ -1,4 +1,4 @@
import { ReactNode, useEffect, useRef, useState } from 'react';
import { ReactNode, useLayoutEffect, useRef, useState } from 'react';
import styled from '@emotion/styled';
type ComputeNodeDimensionsProps = {
@ -27,18 +27,26 @@ export const ComputeNodeDimensions = ({
| undefined
>(undefined);
useEffect(() => {
nodeWrapperRef.current &&
setNodeDimensions({
width: nodeWrapperRef.current.offsetWidth,
height: nodeWrapperRef.current.offsetHeight,
});
}, [node]);
useLayoutEffect(() => {
if (!nodeWrapperRef.current) {
return;
}
const resizeObserver = new ResizeObserver(() => {
if (nodeWrapperRef.current) {
setNodeDimensions({
width: nodeWrapperRef.current.offsetWidth,
height: nodeWrapperRef.current.offsetHeight,
});
}
});
resizeObserver.observe(nodeWrapperRef.current);
return () => resizeObserver.disconnect();
}, [nodeWrapperRef]);
return (
<>
<StyledNodeWrapper ref={nodeWrapperRef}>{node}</StyledNodeWrapper>
{children(nodeDimensions)}
{nodeDimensions && children(nodeDimensions)}
</>
);
};