admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Migrate to twenty-ui - utilities/dimensions (#7949)

Browse Source 
This PR was created by [GitStart](https://gitstart.com/) to address the
requirements from this ticket:
[TWNTY-7539](https://clients.gitstart.com/twenty/5449/tickets/TWNTY-7539).

 --- 

### Description

- Move the utilities/dimensions from twenty-front to twenty-ui and
update imports\

Fixes twentyhq/private-issues#79

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
gitstart-app[bot]
2024-10-23 17:09:32 +02:00
committed by GitHub
parent 849d7c2423
commit dcf92ae7f1
9 changed files with 28 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/twenty-front/src/modules/ui/input/components/EntityTitleDoubleTextInput.tsx
View File

@ -1,10 +1,10 @@
import { ChangeEvent } from 'react';
import styled from '@emotion/styled';
import { ChangeEvent } from 'react';
import { StyledTextInput as UIStyledTextInput } from '@/ui/field/input/components/TextInput';
import { ComputeNodeDimensions } from '@/ui/utilities/dimensions/components/ComputeNodeDimensions';
import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
import { ComputeNodeDimensions } from 'twenty-ui';
import { InputHotkeyScope } from '../types/InputHotkeyScope';
export type EntityTitleDoubleTextInputProps = {

54
packages/twenty-front/src/modules/ui/utilities/dimensions/components/ComputeNodeDimensions.tsx
View File

@ -1,54 +0,0 @@
import { ReactNode, useLayoutEffect, useRef, useState } from 'react';
import styled from '@emotion/styled';
import { isDefined } from '~/utils/isDefined';
type ComputeNodeDimensionsProps = {
children: (
dimensions: { height: number; width: number } | undefined,
) => ReactNode;
node?: ReactNode;
};
const StyledNodeWrapper = styled.span`
pointer-events: none;
position: fixed;
visibility: hidden;
`;
export const ComputeNodeDimensions = ({
children,
node = children(undefined),
}: ComputeNodeDimensionsProps) => {
const nodeWrapperRef = useRef<HTMLSpanElement>(null);
const [nodeDimensions, setNodeDimensions] = useState<
| {
width: number;
height: number;
}
| undefined
>(undefined);
useLayoutEffect(() => {
if (!nodeWrapperRef.current) {
return;
}
const resizeObserver = new ResizeObserver(() => {
if (isDefined(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>
{nodeDimensions && children(nodeDimensions)}
</>
);
};