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

Feat/harmonize chips cell fields (#724)

Browse Source 
* Wip

* Finished

* Fix lint
This commit is contained in:
Lucas Bordeau
2023-07-18 02:14:09 +02:00
committed by GitHub
parent 8b7314cd39
commit 5b21657c4e
21 changed files with 347 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
front/src/modules/ui/table/editable-cell/components/EditableCellContainer.tsx Normal file
View File

@ -0,0 +1,51 @@
import styled from '@emotion/styled';
type Props = {
softFocus?: boolean;
onClick?: () => void;
};
export const EditableCellDisplayModeOuterContainer = styled.div<
Pick<Props, 'softFocus'>
>`
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.sm};
box-shadow: inset 0 0 0 1px ${props.theme.font.color.extraLight};`
: ''}
`;
export const EditableCellDisplayModeInnerContainer = styled.div`
align-items: center;
display: flex;
height: 100%;
overflow: hidden;
width: 100%;
`;
export function EditableCellDisplayContainer({
children,
softFocus,
onClick,
}: React.PropsWithChildren<Props>) {
return (
<EditableCellDisplayModeOuterContainer
onClick={onClick}
softFocus={softFocus}
>
<EditableCellDisplayModeInnerContainer>
{children}
</EditableCellDisplayModeInnerContainer>
</EditableCellDisplayModeOuterContainer>
);
}

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

@ -1,51 +1,19 @@
import styled from '@emotion/styled';
import { useSetSoftFocusOnCurrentCell } from '../hooks/useSetSoftFocusOnCurrentCell';
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.sm};
box-shadow: inset 0 0 0 1px ${props.theme.font.color.extraLight};`
: ''}
`;
export const EditableCellNormalModeInnerContainer = styled.div`
align-items: center;
display: flex;
height: 100%;
overflow: hidden;
width: 100%;
`;
import { EditableCellDisplayContainer } from './EditableCellContainer';
export function EditableCellDisplayMode({
children,
}: React.PropsWithChildren<unknown>) {
const setSoftFocusOnCurrentCell = useSetSoftFocusOnCurrentCell();
function handleOnClick() {
function handleClick() {
setSoftFocusOnCurrentCell();
}
return (
<EditableCellNormalModeOuterContainer onClick={handleOnClick}>
<EditableCellNormalModeInnerContainer>
{children}
</EditableCellNormalModeInnerContainer>
</EditableCellNormalModeOuterContainer>
<EditableCellDisplayContainer onClick={handleClick}>
{children}
</EditableCellDisplayContainer>
);
}

24
front/src/modules/ui/table/editable-cell/components/EditableCellSoftFocusMode.tsx
View File

@ -1,4 +1,4 @@
import React from 'react';
import { PropsWithChildren } from 'react';
import { useScopedHotkeys } from '@/ui/hotkey/hooks/useScopedHotkeys';
import { HotkeyScope } from '@/ui/hotkey/types/HotkeyScope';
@ -7,15 +7,16 @@ import { isNonTextWritingKey } from '@/ui/hotkey/utils/isNonTextWritingKey';
import { TableHotkeyScope } from '../../types/TableHotkeyScope';
import { useEditableCell } from '../hooks/useEditableCell';
import {
EditableCellNormalModeInnerContainer,
EditableCellNormalModeOuterContainer,
} from './EditableCellDisplayMode';
import { EditableCellDisplayContainer } from './EditableCellContainer';
type OwnProps = PropsWithChildren<{
editHotkeyScope?: HotkeyScope;
}>;
export function EditableCellSoftFocusMode({
children,
editHotkeyScope,
}: React.PropsWithChildren<{ editHotkeyScope?: HotkeyScope }>) {
}: OwnProps) {
const { openEditableCell } = useEditableCell();
function openEditMode() {
@ -61,13 +62,8 @@ export function EditableCellSoftFocusMode({
}
return (
<EditableCellNormalModeOuterContainer
onClick={handleClick}
softFocus={true}
>
<EditableCellNormalModeInnerContainer>
{children}
</EditableCellNormalModeInnerContainer>
</EditableCellNormalModeOuterContainer>
<EditableCellDisplayContainer onClick={handleClick} softFocus>
{children}
</EditableCellDisplayContainer>
);
}

22
front/src/modules/ui/table/editable-cell/types/EditableChip.tsx
View File

@ -1,11 +1,4 @@
import {
ChangeEvent,
ComponentType,
ReactNode,
useEffect,
useRef,
useState,
} from 'react';
import { ChangeEvent, ReactNode, useEffect, useRef, useState } from 'react';
import styled from '@emotion/styled';
import { textInputStyle } from '@/ui/themes/effects';
@ -13,18 +6,11 @@ import { textInputStyle } from '@/ui/themes/effects';
import { EditableCell } from '../components/EditableCell';
export type EditableChipProps = {
id: string;
placeholder?: string;
value: string;
picture: string;
changeHandler: (updated: string) => void;
editModeHorizontalAlign?: 'left' | 'right';
ChipComponent: ComponentType<{
id: string;
name: string;
picture: string;
isOverlapped?: boolean;
}>;
ChipComponent: React.ReactNode;
commentThreadCount?: number;
onCommentClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
rightEndContents?: ReactNode[];
@ -52,11 +38,9 @@ const RightContainer = styled.div`
// TODO: move right end content in EditableCell
export function EditableCellChip({
id,
value,
placeholder,
changeHandler,
picture,
editModeHorizontalAlign,
ChipComponent,
rightEndContents,
@ -95,7 +79,7 @@ export function EditableCellChip({
onCancel={onCancel}
nonEditModeContent={
<NoEditModeContainer>
<ChipComponent id={id} name={inputValue} picture={picture} />
{ChipComponent}
<RightContainer>
{rightEndContents &&
rightEndContents.length > 0 &&