Remove unused components (#1180)
* Remove unused components * Fix company not being created issue * Fix company not being created issue * Fix company not being created issue * Optimize rendering * Optimize rendering
This commit is contained in:
Charles Bochet
@ -1,24 +0,0 @@
|
||||
import { ReactElement } from 'react';
|
||||
|
||||
import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
|
||||
import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
|
||||
|
||||
import { BoardCardFieldContext } from '../states/BoardCardFieldContext';
|
||||
|
||||
import { BoardCardEditableFieldInternal } from './BoardCardEditableFieldInternal';
|
||||
|
||||
type OwnProps = {
|
||||
editModeContent: ReactElement;
|
||||
nonEditModeContent: ReactElement;
|
||||
editModeHorizontalAlign?: 'left' | 'right';
|
||||
editModeVerticalPosition?: 'over' | 'below';
|
||||
editHotkeyScope?: HotkeyScope;
|
||||
};
|
||||
|
||||
export function BoardCardEditableField(props: OwnProps) {
|
||||
return (
|
||||
<RecoilScope SpecificContext={BoardCardFieldContext}>
|
||||
<BoardCardEditableFieldInternal {...props} />
|
||||
</RecoilScope>
|
||||
);
|
||||
}
|
||||
@ -1,39 +0,0 @@
|
||||
import { useMemo, useState } from 'react';
|
||||
|
||||
import { DateInputDisplay } from '@/ui/input/date/components/DateInputDisplay';
|
||||
import { debounce } from '~/utils/debounce';
|
||||
|
||||
import { BoardCardEditableField } from './BoardCardEditableField';
|
||||
import { BoardCardEditableFieldDateEditMode } from './BoardCardEditableFieldDateEditMode';
|
||||
|
||||
type OwnProps = {
|
||||
value: Date;
|
||||
onChange: (newValue: Date) => void;
|
||||
editModeHorizontalAlign?: 'left' | 'right';
|
||||
};
|
||||
|
||||
export function BoardCardEditableFieldDate({
|
||||
value,
|
||||
onChange,
|
||||
editModeHorizontalAlign,
|
||||
}: OwnProps) {
|
||||
const [internalValue, setInternalValue] = useState(value);
|
||||
const debouncedOnChange = useMemo(() => {
|
||||
return debounce(onChange, 200);
|
||||
}, [onChange]);
|
||||
return (
|
||||
<BoardCardEditableField
|
||||
editModeHorizontalAlign={editModeHorizontalAlign}
|
||||
editModeContent={
|
||||
<BoardCardEditableFieldDateEditMode
|
||||
value={internalValue}
|
||||
onChange={(date: Date) => {
|
||||
setInternalValue(date);
|
||||
debouncedOnChange(date);
|
||||
}}
|
||||
/>
|
||||
}
|
||||
nonEditModeContent={<DateInputDisplay value={value} />}
|
||||
></BoardCardEditableField>
|
||||
);
|
||||
}
|
||||
@ -1,17 +0,0 @@
|
||||
import { DateInputEdit } from '@/ui/input/date/components/DateInputEdit';
|
||||
|
||||
type OwnProps = {
|
||||
value: Date;
|
||||
onChange: (newValue: Date) => void;
|
||||
};
|
||||
|
||||
export function BoardCardEditableFieldDateEditMode({
|
||||
value,
|
||||
onChange,
|
||||
}: OwnProps) {
|
||||
function handleDateChange(newDate: Date) {
|
||||
onChange(newDate);
|
||||
}
|
||||
|
||||
return <DateInputEdit value={value} onChange={handleDateChange} />;
|
||||
}
|
||||
@ -1,32 +0,0 @@
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
export const BoardCardFieldDisplayModeOuterContainer = styled.div`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
padding-left: ${({ theme }) => theme.spacing(2)};
|
||||
padding-right: ${({ theme }) => theme.spacing(1)};
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
export const BoardCardFieldDisplayModeInnerContainer = styled.div`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
export function BoardCardEditableFieldDisplayMode({
|
||||
children,
|
||||
}: React.PropsWithChildren<unknown>) {
|
||||
return (
|
||||
<BoardCardFieldDisplayModeOuterContainer>
|
||||
<BoardCardFieldDisplayModeInnerContainer>
|
||||
{children}
|
||||
</BoardCardFieldDisplayModeInnerContainer>
|
||||
</BoardCardFieldDisplayModeOuterContainer>
|
||||
);
|
||||
}
|
||||
@ -1,81 +0,0 @@
|
||||
import { ReactElement, useRef } from 'react';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { overlayBackground } from '@/ui/theme/constants/effects';
|
||||
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
|
||||
import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
|
||||
|
||||
import { BoardCardFieldHotkeyScope } from '../types/BoardCardFieldHotkeyScope';
|
||||
|
||||
export const BoardCardFieldEditModeContainer = styled.div<
|
||||
Omit<OwnProps, 'onExit'>
|
||||
>`
|
||||
align-items: center;
|
||||
border: 1px solid ${({ theme }) => theme.border.color.light};
|
||||
border-radius: ${({ theme }) => theme.border.radius.sm};
|
||||
display: flex;
|
||||
left: ${(props) =>
|
||||
props.editModeHorizontalAlign === 'right' ? 'auto' : '0'};
|
||||
margin-left: -2px;
|
||||
min-height: 100%;
|
||||
min-width: calc(100% + 20px);
|
||||
position: absolute;
|
||||
|
||||
right: ${(props) =>
|
||||
props.editModeHorizontalAlign === 'right' ? '0' : 'auto'};
|
||||
top: ${(props) => (props.editModeVerticalPosition === 'over' ? '0' : '100%')};
|
||||
z-index: 1;
|
||||
${overlayBackground}
|
||||
`;
|
||||
|
||||
type OwnProps = {
|
||||
children: ReactElement;
|
||||
editModeHorizontalAlign?: 'left' | 'right';
|
||||
editModeVerticalPosition?: 'over' | 'below';
|
||||
onExit: () => void;
|
||||
};
|
||||
|
||||
export function BoardCardEditableFieldEditMode({
|
||||
editModeHorizontalAlign,
|
||||
editModeVerticalPosition,
|
||||
children,
|
||||
onExit,
|
||||
}: OwnProps) {
|
||||
const wrapperRef = useRef(null);
|
||||
|
||||
useListenClickOutside({
|
||||
refs: [wrapperRef],
|
||||
callback: () => {
|
||||
onExit();
|
||||
},
|
||||
});
|
||||
|
||||
useScopedHotkeys(
|
||||
'enter',
|
||||
() => {
|
||||
onExit();
|
||||
},
|
||||
BoardCardFieldHotkeyScope.BoardCardFieldEditMode,
|
||||
[onExit],
|
||||
);
|
||||
|
||||
useScopedHotkeys(
|
||||
'esc',
|
||||
() => {
|
||||
onExit();
|
||||
},
|
||||
BoardCardFieldHotkeyScope.BoardCardFieldEditMode,
|
||||
[onExit],
|
||||
);
|
||||
|
||||
return (
|
||||
<BoardCardFieldEditModeContainer
|
||||
data-testid="editable-cell-edit-mode-container"
|
||||
ref={wrapperRef}
|
||||
editModeHorizontalAlign={editModeHorizontalAlign}
|
||||
editModeVerticalPosition={editModeVerticalPosition}
|
||||
>
|
||||
{children}
|
||||
</BoardCardFieldEditModeContainer>
|
||||
);
|
||||
}
|
||||
@ -1,82 +0,0 @@
|
||||
import { ReactElement } from 'react';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
|
||||
import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
|
||||
|
||||
import { useBoardCardField } from '../hooks/useBoardCardField';
|
||||
import { BoardCardFieldHotkeyScope } from '../types/BoardCardFieldHotkeyScope';
|
||||
|
||||
import { BoardCardEditableFieldDisplayMode } from './BoardCardEditableFieldDisplayMode';
|
||||
import { BoardCardEditableFieldEditMode } from './BoardCardEditableFieldEditMode';
|
||||
|
||||
export const BoardCardFieldContainer = styled.div`
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
height: 32px;
|
||||
position: relative;
|
||||
user-select: none;
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
type OwnProps = {
|
||||
editModeContent: ReactElement;
|
||||
nonEditModeContent: ReactElement;
|
||||
editModeHorizontalAlign?: 'left' | 'right';
|
||||
editModeVerticalPosition?: 'over' | 'below';
|
||||
editHotkeyScope?: HotkeyScope;
|
||||
};
|
||||
|
||||
export function BoardCardEditableFieldInternal({
|
||||
editModeHorizontalAlign = 'left',
|
||||
editModeVerticalPosition = 'over',
|
||||
editModeContent,
|
||||
nonEditModeContent,
|
||||
editHotkeyScope,
|
||||
}: OwnProps) {
|
||||
const { openBoardCardField, isBoardCardFieldInEditMode } =
|
||||
useBoardCardField();
|
||||
|
||||
const { closeBoardCardField } = useBoardCardField();
|
||||
|
||||
const {
|
||||
goBackToPreviousHotkeyScope,
|
||||
setHotkeyScopeAndMemorizePreviousScope,
|
||||
} = usePreviousHotkeyScope();
|
||||
|
||||
function handleOnClick() {
|
||||
if (!isBoardCardFieldInEditMode) {
|
||||
openBoardCardField();
|
||||
setHotkeyScopeAndMemorizePreviousScope(
|
||||
editHotkeyScope?.scope ??
|
||||
BoardCardFieldHotkeyScope.BoardCardFieldEditMode,
|
||||
editHotkeyScope?.customScopes ?? {},
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function handleEditModeExit() {
|
||||
goBackToPreviousHotkeyScope();
|
||||
closeBoardCardField();
|
||||
}
|
||||
|
||||
return (
|
||||
<BoardCardFieldContainer onClick={handleOnClick}>
|
||||
{isBoardCardFieldInEditMode ? (
|
||||
<BoardCardEditableFieldEditMode
|
||||
editModeHorizontalAlign={editModeHorizontalAlign}
|
||||
editModeVerticalPosition={editModeVerticalPosition}
|
||||
onExit={handleEditModeExit}
|
||||
>
|
||||
{editModeContent}
|
||||
</BoardCardEditableFieldEditMode>
|
||||
) : (
|
||||
<BoardCardEditableFieldDisplayMode>
|
||||
{nonEditModeContent}
|
||||
</BoardCardEditableFieldDisplayMode>
|
||||
)}
|
||||
</BoardCardFieldContainer>
|
||||
);
|
||||
}
|
||||
@ -1,46 +0,0 @@
|
||||
import { ChangeEvent, useMemo, useState } from 'react';
|
||||
|
||||
import { TextInputDisplay } from '@/ui/input/text/components/TextInputDisplay';
|
||||
import { StyledInput } from '@/ui/table/editable-cell/type/components/TextCellEdit';
|
||||
import { debounce } from '~/utils/debounce';
|
||||
|
||||
import { BoardCardEditableField } from './BoardCardEditableField';
|
||||
|
||||
type OwnProps = {
|
||||
placeholder?: string;
|
||||
value: string;
|
||||
onChange: (newValue: string) => void;
|
||||
editModeHorizontalAlign?: 'left' | 'right';
|
||||
};
|
||||
|
||||
export function BoardCardEditableFieldText({
|
||||
value,
|
||||
placeholder,
|
||||
onChange,
|
||||
editModeHorizontalAlign,
|
||||
}: OwnProps) {
|
||||
const [internalValue, setInternalValue] = useState(value);
|
||||
|
||||
const debouncedOnChange = useMemo(() => {
|
||||
return debounce(onChange, 200);
|
||||
}, [onChange]);
|
||||
|
||||
return (
|
||||
<BoardCardEditableField
|
||||
editModeHorizontalAlign={editModeHorizontalAlign}
|
||||
editModeContent={
|
||||
<StyledInput
|
||||
placeholder={placeholder || ''}
|
||||
autoFocus
|
||||
value={internalValue}
|
||||
autoComplete="off"
|
||||
onChange={(event: ChangeEvent<HTMLInputElement>) => {
|
||||
setInternalValue(event.target.value);
|
||||
debouncedOnChange(event.target.value);
|
||||
}}
|
||||
/>
|
||||
}
|
||||
nonEditModeContent={<TextInputDisplay>{value}</TextInputDisplay>}
|
||||
></BoardCardEditableField>
|
||||
);
|
||||
}
|
||||
@ -1,26 +0,0 @@
|
||||
import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
|
||||
|
||||
import { BoardCardFieldContext } from '../states/BoardCardFieldContext';
|
||||
import { isBoardCardFieldInEditModeScopedState } from '../states/isBoardCardFieldInEditModeScopedState';
|
||||
|
||||
export function useBoardCardField() {
|
||||
const [isBoardCardFieldInEditMode, setIsBoardCardFieldInEditMode] =
|
||||
useRecoilScopedState(
|
||||
isBoardCardFieldInEditModeScopedState,
|
||||
BoardCardFieldContext,
|
||||
);
|
||||
|
||||
function openBoardCardField() {
|
||||
setIsBoardCardFieldInEditMode(true);
|
||||
}
|
||||
|
||||
function closeBoardCardField() {
|
||||
setIsBoardCardFieldInEditMode(false);
|
||||
}
|
||||
|
||||
return {
|
||||
isBoardCardFieldInEditMode,
|
||||
openBoardCardField,
|
||||
closeBoardCardField,
|
||||
};
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
import { createContext } from 'react';
|
||||
|
||||
export const BoardCardFieldContext = createContext<string | null>(null);
|
||||
@ -1,9 +0,0 @@
|
||||
import { atomFamily } from 'recoil';
|
||||
|
||||
export const isBoardCardFieldInEditModeScopedState = atomFamily<
|
||||
boolean,
|
||||
string
|
||||
>({
|
||||
key: 'isBoardCardFieldInEditModeScopedState',
|
||||
default: false,
|
||||
});
|
||||
@ -1,3 +0,0 @@
|
||||
export enum BoardCardFieldHotkeyScope {
|
||||
BoardCardFieldEditMode = 'board-card-field-edit-mode',
|
||||
}
|
||||
@ -1,53 +0,0 @@
|
||||
// TODO: refactor this test with Recoil
|
||||
describe('getOptimisticlyUpdatedBoard', () => {
|
||||
it('should return a new board with the updated cell', () => {
|
||||
// const initialColumn1: string[] = ['item-1', 'item-2', 'item-3'];
|
||||
// const initialColumn2: string[] = ['item-4', 'item-5'];
|
||||
// const finalColumn1: string[] = ['item-2', 'item-3'];
|
||||
// const finalColumn2: string[] = ['item-4', 'item-1', 'item-5'];
|
||||
// const dropResult = {
|
||||
// source: {
|
||||
// droppableId: 'column-1',
|
||||
// index: 0,
|
||||
// },
|
||||
// destination: {
|
||||
// droppableId: 'column-2',
|
||||
// index: 1,
|
||||
// },
|
||||
// } as DropResult;
|
||||
// const initialBoard = [
|
||||
// {
|
||||
// id: 'column-1',
|
||||
// title: 'My Column',
|
||||
// pipelineStageId: 'column-1',
|
||||
// pipelineProgressIds: initialColumn1,
|
||||
// },
|
||||
// {
|
||||
// id: 'column-2',
|
||||
// title: 'My Column',
|
||||
// pipelineStageId: 'column-2',
|
||||
// pipelineProgressIds: initialColumn2,
|
||||
// },
|
||||
// ];
|
||||
// const updatedBoard = u(
|
||||
// initialBoard,
|
||||
// dropResult,
|
||||
// );
|
||||
// const finalBoard = [
|
||||
// {
|
||||
// id: 'column-1',
|
||||
// title: 'My Column',
|
||||
// pipelineStageId: 'column-1',
|
||||
// pipelineProgressIds: finalColumn1,
|
||||
// },
|
||||
// {
|
||||
// id: 'column-2',
|
||||
// title: 'My Column',
|
||||
// pipelineStageId: 'column-2',
|
||||
// pipelineProgressIds: finalColumn2,
|
||||
// },
|
||||
// ];
|
||||
// expect(updatedBoard).toEqual(finalBoard);
|
||||
// expect(updatedBoard).not.toBe(initialBoard);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user