Refactor/inplace input (#541)

* wip

* Changed all other components

* Removed console log

* Console.log

* lint

* Removed internal state

* Fix

* Lint
This commit is contained in:
Lucas Bordeau
2023-07-09 01:45:52 +02:00
committed by GitHub
parent b3d0061e0d
commit e03d5ed8a7
47 changed files with 680 additions and 326 deletions

View File

@ -2,11 +2,8 @@ import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { IconCurrencyDollar } from '@tabler/icons-react';
import { RecoilScope } from '@/recoil-scope/components/RecoilScope';
import { EditableDate } from '@/ui/components/editable-cell/types/EditableDate';
import { EditableText } from '@/ui/components/editable-cell/types/EditableText';
import { CellContext } from '@/ui/tables/states/CellContext';
import { RowContext } from '@/ui/tables/states/RowContext';
import { BoardCardEditableFieldDate } from '@/ui/board-card-field-inputs/components/BoardCardEditableFieldDate';
import { BoardCardEditableFieldText } from '@/ui/board-card-field-inputs/components/BoardCardEditableFieldText';
import { Company, PipelineProgress } from '../../../generated/graphql';
import { Checkbox } from '../../ui/components/form/Checkbox';
@ -72,17 +69,6 @@ type PipelineProgressProp = Pick<
'id' | 'amount' | 'closeDate'
>;
// TODO: Remove when refactoring EditableCell into EditableField
function HackScope({ children }: { children: React.ReactNode }) {
return (
<RecoilScope>
<RecoilScope SpecificContext={RowContext}>
<RecoilScope SpecificContext={CellContext}>{children}</RecoilScope>
</RecoilScope>
</RecoilScope>
);
}
export function CompanyBoardCard({
company,
pipelineProgress,
@ -112,32 +98,28 @@ export function CompanyBoardCard({
<StyledBoardCardBody>
<span>
<IconCurrencyDollar size={theme.icon.size.md} />
<HackScope>
<EditableText
content={pipelineProgress.amount?.toString() || ''}
placeholder="Opportunity amount"
changeHandler={(value) =>
onCardUpdate({
...pipelineProgress,
amount: parseInt(value),
})
}
/>
</HackScope>
<BoardCardEditableFieldText
value={pipelineProgress.amount?.toString() || ''}
placeholder="Opportunity amount"
onChange={(value) =>
onCardUpdate({
...pipelineProgress,
amount: parseInt(value),
})
}
/>
</span>
<span>
<IconCalendarEvent size={theme.icon.size.md} />
<HackScope>
<EditableDate
value={new Date(pipelineProgress.closeDate || Date.now())}
changeHandler={(value) => {
onCardUpdate({
...pipelineProgress,
closeDate: value.toISOString(),
});
}}
/>
</HackScope>
<BoardCardEditableFieldDate
value={new Date(pipelineProgress.closeDate || Date.now())}
onChange={(value) => {
onCardUpdate({
...pipelineProgress,
closeDate: value.toISOString(),
});
}}
/>
</span>
</StyledBoardCardBody>
</StyledBoardCard>