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

Refacto/abstract inplace input (#530)

Browse Source 
* Move code to new folder

* Deduplicate code, remove dependancy on table

* Remove more table dependency

* Move close logic to input

* Migrate editable text cell

* Rename EditableTextInput

* Fix component test id
This commit is contained in:
Emilien Chauvet
2023-07-07 12:11:57 -07:00
committed by GitHub
parent 26b033abc9
commit c847bca293
19 changed files with 189 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
front/src/modules/ui/components/editable-cell/EditableCellDisplayMode.tsx
View File

@ -1,47 +0,0 @@
import styled from '@emotion/styled';
import { useIsSoftFocusOnCurrentCell } from './hooks/useIsSoftFocusOnCurrentCell';
type Props = {
softFocus: boolean;
};
export const EditableCellNormalModeOuterContainer = styled.div<Props>`
align-items: center;
display: flex;
height: 100%;
overflow: hidden;
padding-left: ${({ theme }) => theme.spacing(2)};
padding-right: ${({ theme }) => theme.spacing(1)};
width: 100%;
${(props) =>
props.softFocus
? `background: ${props.theme.background.transparent.secondary};
border-radius: ${props.theme.border.radius.md};
box-shadow: inset 0 0 0 1px ${props.theme.grayScale.gray30};`
: ''}
`;
export const EditableCellNormalModeInnerContainer = styled.div`
align-items: center;
display: flex;
height: 100%;
overflow: hidden;
width: 100%;
`;
export function EditableCellDisplayMode({
children,
}: React.PropsWithChildren<unknown>) {
const hasSoftFocus = useIsSoftFocusOnCurrentCell();
return (
<EditableCellNormalModeOuterContainer softFocus={hasSoftFocus}>
<EditableCellNormalModeInnerContainer>
{children}
</EditableCellNormalModeInnerContainer>
</EditableCellNormalModeOuterContainer>
);
}