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

Refactor/new menu item (#1448)

Browse Source 
* wip

* finished

* Added disabled

* Fixed disabled

* Finished cleaning

* Minor fixes from merge

* Added docs

* Added PascalCase

* Fix from review

* Fixes from merge

* Fix lint

* Fixed storybook tests
This commit is contained in:
Lucas Bordeau
2023-09-06 16:41:26 +02:00
committed by GitHub
parent 5c7660f588
commit 28ca9a9e49
96 changed files with 816 additions and 918 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
front/src/modules/ui/editable-field/components/EditableField.tsx
View File

@ -2,6 +2,7 @@ import { useState } from 'react';
import styled from '@emotion/styled';
import { motion } from 'framer-motion';
import { IconComponent } from '@/ui/icon/types/IconComponent';
import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
import { useEditableField } from '../hooks/useEditableField';
@ -71,7 +72,7 @@ const StyledEditableFieldBaseContainer = styled.div`
`;
type OwnProps = {
iconLabel?: React.ReactNode;
IconLabel?: IconComponent;
label?: string;
labelFixedWidth?: number;
useEditButton?: boolean;
@ -87,7 +88,7 @@ type OwnProps = {
};
export function EditableField({
iconLabel,
IconLabel,
label,
labelFixedWidth,
useEditButton,
@ -125,7 +126,11 @@ export function EditableField({
onMouseLeave={handleContainerMouseLeave}
>
<StyledLabelAndIconContainer>
{iconLabel && <StyledIconContainer>{iconLabel}</StyledIconContainer>}
{IconLabel && (
<StyledIconContainer>
<IconLabel />
</StyledIconContainer>
)}
{label && (
<StyledLabel labelFixedWidth={labelFixedWidth}>{label}</StyledLabel>
)}

2
front/src/modules/ui/editable-field/components/GenericEditableBooleanField.tsx
View File

@ -18,7 +18,7 @@ export function GenericEditableBooleanField() {
return (
<RecoilScope SpecificContext={FieldRecoilScopeContext}>
<EditableField
iconLabel={currentEditableFieldDefinition.icon}
IconLabel={currentEditableFieldDefinition.Icon}
displayModeContent={<GenericEditableBooleanFieldDisplayMode />}
displayModeContentOnly
/>

2
front/src/modules/ui/editable-field/components/GenericEditableDateField.tsx
View File

@ -32,7 +32,7 @@ export function GenericEditableDateField() {
return (
<RecoilScope SpecificContext={FieldRecoilScopeContext}>
<EditableField
iconLabel={currentEditableFieldDefinition.icon}
IconLabel={currentEditableFieldDefinition.Icon}
editModeContent={<GenericEditableDateFieldEditMode />}
displayModeContent={<GenericEditableDateFieldDisplayMode />}
isDisplayModeContentEmpty={!fieldValue}

2
front/src/modules/ui/editable-field/components/GenericEditableNumberField.tsx
View File

@ -31,7 +31,7 @@ export function GenericEditableNumberField() {
return (
<RecoilScope SpecificContext={FieldRecoilScopeContext}>
<EditableField
iconLabel={currentEditableFieldDefinition.icon}
IconLabel={currentEditableFieldDefinition.Icon}
editModeContent={<GenericEditableNumberFieldEditMode />}
displayModeContent={fieldValue}
isDisplayModeContentEmpty={!fieldValue}

2
front/src/modules/ui/editable-field/components/GenericEditablePhoneField.tsx
View File

@ -33,7 +33,7 @@ export function GenericEditablePhoneField() {
<RecoilScope SpecificContext={FieldRecoilScopeContext}>
<EditableField
useEditButton
iconLabel={currentEditableFieldDefinition.icon}
IconLabel={currentEditableFieldDefinition.Icon}
editModeContent={<GenericEditablePhoneFieldEditMode />}
displayModeContent={<PhoneInputDisplay value={fieldValue} />}
isDisplayModeContentEmpty={!fieldValue}

2
front/src/modules/ui/editable-field/components/GenericEditableRelationField.tsx
View File

@ -38,7 +38,7 @@ export function GenericEditableRelationField() {
customEditHotkeyScope={{
scope: RelationPickerHotkeyScope.RelationPicker,
}}
iconLabel={currentEditableFieldDefinition.icon}
IconLabel={currentEditableFieldDefinition.Icon}
editModeContent={<GenericEditableRelationFieldEditMode />}
displayModeContent={<GenericEditableRelationFieldDisplayMode />}
isDisplayModeContentEmpty={!fieldValue}

2
front/src/modules/ui/editable-field/components/GenericEditableTextField.tsx
View File

@ -31,7 +31,7 @@ export function GenericEditableTextField() {
return (
<RecoilScope SpecificContext={FieldRecoilScopeContext}>
<EditableField
iconLabel={currentEditableFieldDefinition.icon}
IconLabel={currentEditableFieldDefinition.Icon}
editModeContent={<GenericEditableTextFieldEditMode />}
displayModeContent={fieldValue}
isDisplayModeContentEmpty={!fieldValue}

2
front/src/modules/ui/editable-field/components/GenericEditableURLField.tsx
View File

@ -33,7 +33,7 @@ export function GenericEditableURLField() {
<RecoilScope SpecificContext={FieldRecoilScopeContext}>
<EditableField
useEditButton
iconLabel={currentEditableFieldDefinition.icon}
IconLabel={currentEditableFieldDefinition.Icon}
editModeContent={<GenericEditableURLFieldEditMode />}
displayModeContent={<FieldDisplayURL URL={fieldValue} />}
isDisplayModeContentEmpty={!fieldValue}

2
front/src/modules/ui/editable-field/components/ProbabilityEditableField.tsx
View File

@ -18,7 +18,7 @@ export function ProbabilityEditableField() {
return (
<RecoilScope SpecificContext={FieldRecoilScopeContext}>
<EditableField
iconLabel={currentEditableFieldDefinition.icon}
IconLabel={currentEditableFieldDefinition.Icon}
displayModeContent={<ProbabilityEditableFieldEditMode />}
displayModeContentOnly
disableHoverEffect

4
front/src/modules/ui/editable-field/types/FieldDefinition.ts
View File

@ -1,9 +1,11 @@
import { IconComponent } from '@/ui/icon/types/IconComponent';
import { FieldMetadata, FieldType } from './FieldMetadata';
export type FieldDefinition<T extends FieldMetadata | unknown> = {
key: string;
name: string;
icon?: JSX.Element;
Icon?: IconComponent;
type: FieldType;
metadata: T;
};

3
front/src/modules/ui/editable-field/types/ViewField.ts
View File

@ -1,3 +1,4 @@
import { IconComponent } from '@/ui/icon/types/IconComponent';
import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect';
import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
@ -118,7 +119,7 @@ export type ViewFieldMetadata = { type: ViewFieldType } & (
export type ViewFieldDefinition<T extends ViewFieldMetadata | unknown> = {
key: string;
name: string;
icon?: JSX.Element;
Icon?: IconComponent;
isVisible?: boolean;
metadata: T;
};

7
front/src/modules/ui/editable-field/variants/components/DateEditableField.tsx
View File

@ -1,5 +1,6 @@
import { EditableField } from '@/ui/editable-field/components/EditableField';
import { FieldRecoilScopeContext } from '@/ui/editable-field/states/recoil-scope-contexts/FieldRecoilScopeContext';
import { IconComponent } from '@/ui/icon/types/IconComponent';
import { DateInputDisplay } from '@/ui/input/date/components/DateInputDisplay';
import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
import { parseDate } from '~/utils/date-utils';
@ -7,13 +8,13 @@ import { parseDate } from '~/utils/date-utils';
import { EditableFieldEditModeDate } from './EditableFieldEditModeDate';
type OwnProps = {
icon?: React.ReactNode;
Icon?: IconComponent;
label?: string;
value: string | null | undefined;
onSubmit?: (newValue: string) => void;
};
export function DateEditableField({ icon, value, label, onSubmit }: OwnProps) {
export function DateEditableField({ Icon, value, label, onSubmit }: OwnProps) {
async function handleChange(newValue: string) {
onSubmit?.(newValue);
}
@ -25,7 +26,7 @@ export function DateEditableField({ icon, value, label, onSubmit }: OwnProps) {
<EditableField
// onSubmit={handleSubmit}
// onCancel={handleCancel}
iconLabel={icon}
IconLabel={Icon}
label={label}
editModeContent={
<EditableFieldEditModeDate

7
front/src/modules/ui/editable-field/variants/components/PhoneEditableField.tsx
View File

@ -2,19 +2,20 @@ import { useEffect, useState } from 'react';
import { EditableField } from '@/ui/editable-field/components/EditableField';
import { FieldRecoilScopeContext } from '@/ui/editable-field/states/recoil-scope-contexts/FieldRecoilScopeContext';
import { IconComponent } from '@/ui/icon/types/IconComponent';
import { PhoneInputDisplay } from '@/ui/input/phone/components/PhoneInputDisplay';
import { TextInputEdit } from '@/ui/input/text/components/TextInputEdit';
import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
type OwnProps = {
icon?: React.ReactNode;
Icon?: IconComponent;
placeholder?: string;
value: string | null | undefined;
onSubmit?: (newValue: string) => void;
};
export function PhoneEditableField({
icon,
Icon,
placeholder,
value,
onSubmit,
@ -44,7 +45,7 @@ export function PhoneEditableField({
<EditableField
onSubmit={handleSubmit}
onCancel={handleCancel}
iconLabel={icon}
IconLabel={Icon}
editModeContent={
<TextInputEdit
placeholder={placeholder ?? ''}

6
front/src/modules/ui/editable-field/variants/components/__stories__/DateEditableField.stories.tsx
View File

@ -10,10 +10,10 @@ const meta: Meta<typeof DateEditableField> = {
component: DateEditableField,
decorators: [ComponentDecorator],
argTypes: {
icon: {
Icon: {
type: 'boolean',
mapping: {
true: <IconCalendar />,
true: IconCalendar,
false: undefined,
},
},
@ -21,7 +21,7 @@ const meta: Meta<typeof DateEditableField> = {
},
args: {
value: new Date().toISOString(),
icon: true,
Icon: IconCalendar,
},
};

6
front/src/modules/ui/editable-field/variants/components/__stories__/PhoneEditableField.stories.tsx
View File

@ -10,17 +10,17 @@ const meta: Meta<typeof PhoneEditableField> = {
component: PhoneEditableField,
decorators: [ComponentWithRouterDecorator],
argTypes: {
icon: {
Icon: {
type: 'boolean',
mapping: {
true: <IconPhone />,
true: IconPhone,
false: undefined,
},
},
},
args: {
value: '+33714446494',
icon: true,
Icon: IconPhone,
placeholder: 'Phone',
},
};