mukeshs/twenty_crm
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Reafactor/UI input and displays (#1544)

Browse Source 
* WIP

* Text field

* URL

* Finished PhoneInput

* Refactored input sub-folders

* Boolean

* Fix lint

* Fix lint

* Fix useOutsideClick

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Lucas Bordeau
2023-09-12 02:11:20 +02:00
committed by GitHub
parent 509ffddc57
commit a766c60aa5
90 changed files with 618 additions and 461 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
front/src/modules/ui/editable-field/components/GenericEditableBooleanFieldDisplayMode.tsx
View File

@ -1,9 +1,7 @@
import { useContext } from 'react';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { useRecoilState } from 'recoil';
import { IconCheck, IconX } from '@/ui/icon';
import { BooleanInput } from '@/ui/input/components/BooleanInput';
import { EditableFieldDefinitionContext } from '../contexts/EditableFieldDefinitionContext';
import { EditableFieldEntityIdContext } from '../contexts/EditableFieldEntityIdContext';
@ -12,16 +10,6 @@ import { genericEntityFieldFamilySelector } from '../states/selectors/genericEnt
import { FieldDefinition } from '../types/FieldDefinition';
import { FieldBooleanMetadata } from '../types/FieldMetadata';
const StyledEditableBooleanFieldContainer = styled.div`
align-items: center;
cursor: pointer;
display: flex;
`;
const StyledEditableBooleanFieldValue = styled.div`
margin-left: ${({ theme }) => theme.spacing(1)};
`;
export function GenericEditableBooleanFieldDisplayMode() {
const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext);
const currentEditableFieldDefinition = useContext(
@ -37,32 +25,20 @@ export function GenericEditableBooleanFieldDisplayMode() {
}),
);
const theme = useTheme();
const updateField = useUpdateGenericEntityField();
function toggleValue() {
const newToggledValue = !fieldValue;
setFieldValue(newToggledValue);
function handleSubmit(newValue: boolean) {
if (currentEditableFieldEntityId && updateField) {
updateField(
currentEditableFieldEntityId,
currentEditableFieldDefinition,
newToggledValue,
newValue,
);
// TODO: use optimistic effect instead, but needs generic refactor
setFieldValue(newValue);
}
}
return (
<StyledEditableBooleanFieldContainer onClick={toggleValue}>
{fieldValue ? (
<IconCheck size={theme.icon.size.sm} />
) : (
<IconX size={theme.icon.size.sm} />
)}
<StyledEditableBooleanFieldValue>
{fieldValue ? 'True' : 'False'}
</StyledEditableBooleanFieldValue>
</StyledEditableBooleanFieldContainer>
);
return <BooleanInput value={fieldValue} onToggle={handleSubmit} />;
}