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

Refacto/remaining inplace input cells (#531)

Browse Source 
* Add inplace date input component

* Add inplace phone input component

* Add inplace double text input component

* Add inplace chip input component

* Remove useless styled component

* Reduce code through props destructuring
This commit is contained in:
Emilien Chauvet
2023-07-07 15:00:01 -07:00
committed by GitHub
parent f62fdc1219
commit 6446692f25
16 changed files with 168 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
front/src/modules/pipeline-progress/components/CompanyBoardCard.tsx
View File

@ -3,10 +3,8 @@ 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 { InplaceDateInput } from '@/ui/components/inplace-input/types/InplaceDateInput';
import { InplaceTextInput } from '@/ui/components/inplace-input/types/InplaceTextInput';
import { CellContext } from '@/ui/tables/states/CellContext';
import { RowContext } from '@/ui/tables/states/RowContext';
import { Company, PipelineProgress } from '../../../generated/graphql';
import { Checkbox } from '../../ui/components/form/Checkbox';
@ -72,17 +70,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,7 +99,7 @@ export function CompanyBoardCard({
<StyledBoardCardBody>
<span>
<IconCurrencyDollar size={theme.icon.size.md} />
<HackScope>
<RecoilScope>
<InplaceTextInput
content={pipelineProgress.amount?.toString() || ''}
placeholder="Opportunity amount"
@ -123,12 +110,12 @@ export function CompanyBoardCard({
})
}
/>
</HackScope>
</RecoilScope>
</span>
<span>
<IconCalendarEvent size={theme.icon.size.md} />
<HackScope>
<EditableDate
<RecoilScope>
<InplaceDateInput
value={new Date(pipelineProgress.closeDate || Date.now())}
changeHandler={(value) => {
onCardUpdate({
@ -137,7 +124,7 @@ export function CompanyBoardCard({
});
}}
/>
</HackScope>
</RecoilScope>
</span>
</StyledBoardCardBody>
</StyledBoardCard>