Add email composite field (#9061)

Same as links, only adding primary email
This commit is contained in:
Thomas Trompette 2024-12-13 18:05:31 +01:00 committed by GitHub
parent 32e7eb79b9
commit 5961d26f91
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 86 additions and 0 deletions

View File

@ -1,5 +1,6 @@
import { FormAddressFieldInput } from '@/object-record/record-field/form-types/components/FormAddressFieldInput'; import { FormAddressFieldInput } from '@/object-record/record-field/form-types/components/FormAddressFieldInput';
import { FormBooleanFieldInput } from '@/object-record/record-field/form-types/components/FormBooleanFieldInput'; import { FormBooleanFieldInput } from '@/object-record/record-field/form-types/components/FormBooleanFieldInput';
import { FormEmailsFieldInput } from '@/object-record/record-field/form-types/components/FormEmailsFieldInput';
import { FormFullNameFieldInput } from '@/object-record/record-field/form-types/components/FormFullNameFieldInput'; import { FormFullNameFieldInput } from '@/object-record/record-field/form-types/components/FormFullNameFieldInput';
import { FormLinksFieldInput } from '@/object-record/record-field/form-types/components/FormLinksFieldInput'; import { FormLinksFieldInput } from '@/object-record/record-field/form-types/components/FormLinksFieldInput';
import { FormNumberFieldInput } from '@/object-record/record-field/form-types/components/FormNumberFieldInput'; import { FormNumberFieldInput } from '@/object-record/record-field/form-types/components/FormNumberFieldInput';
@ -9,12 +10,14 @@ import { VariablePickerComponent } from '@/object-record/record-field/form-types
import { FieldDefinition } from '@/object-record/record-field/types/FieldDefinition'; import { FieldDefinition } from '@/object-record/record-field/types/FieldDefinition';
import { import {
FieldAddressValue, FieldAddressValue,
FieldEmailsValue,
FieldFullNameValue, FieldFullNameValue,
FieldLinksValue, FieldLinksValue,
FieldMetadata, FieldMetadata,
} from '@/object-record/record-field/types/FieldMetadata'; } from '@/object-record/record-field/types/FieldMetadata';
import { isFieldAddress } from '@/object-record/record-field/types/guards/isFieldAddress'; import { isFieldAddress } from '@/object-record/record-field/types/guards/isFieldAddress';
import { isFieldBoolean } from '@/object-record/record-field/types/guards/isFieldBoolean'; import { isFieldBoolean } from '@/object-record/record-field/types/guards/isFieldBoolean';
import { isFieldEmails } from '@/object-record/record-field/types/guards/isFieldEmails';
import { isFieldFullName } from '@/object-record/record-field/types/guards/isFieldFullName'; import { isFieldFullName } from '@/object-record/record-field/types/guards/isFieldFullName';
import { isFieldLinks } from '@/object-record/record-field/types/guards/isFieldLinks'; import { isFieldLinks } from '@/object-record/record-field/types/guards/isFieldLinks';
import { isFieldNumber } from '@/object-record/record-field/types/guards/isFieldNumber'; import { isFieldNumber } from '@/object-record/record-field/types/guards/isFieldNumber';
@ -88,5 +91,12 @@ export const FormFieldInput = ({
onPersist={onPersist} onPersist={onPersist}
VariablePicker={VariablePicker} VariablePicker={VariablePicker}
/> />
) : isFieldEmails(field) ? (
<FormEmailsFieldInput
label={field.label}
defaultValue={defaultValue as FieldEmailsValue | undefined}
onPersist={onPersist}
VariablePicker={VariablePicker}
/>
) : null; ) : null;
}; };

View File

@ -0,0 +1,45 @@
import { FormFieldInputContainer } from '@/object-record/record-field/form-types/components/FormFieldInputContainer';
import { FormNestedFieldInputContainer } from '@/object-record/record-field/form-types/components/FormNestedFieldInputContainer';
import { FormTextFieldInput } from '@/object-record/record-field/form-types/components/FormTextFieldInput';
import { VariablePickerComponent } from '@/object-record/record-field/form-types/types/VariablePickerComponent';
import { FieldEmailsValue } from '@/object-record/record-field/types/FieldMetadata';
import { InputLabel } from '@/ui/input/components/InputLabel';
type FormEmailsFieldInputProps = {
label?: string;
defaultValue?: FieldEmailsValue;
onPersist: (value: FieldEmailsValue) => void;
VariablePicker?: VariablePickerComponent;
readonly?: boolean;
};
export const FormEmailsFieldInput = ({
label,
defaultValue,
onPersist,
readonly,
VariablePicker,
}: FormEmailsFieldInputProps) => {
const handleChange = (email: string) => {
onPersist({
primaryEmail: email,
additionalEmails: [],
});
};
return (
<FormFieldInputContainer>
{label ? <InputLabel>{label}</InputLabel> : null}
<FormNestedFieldInputContainer>
<FormTextFieldInput
label="Primary Email"
defaultValue={defaultValue?.primaryEmail}
onPersist={handleChange}
placeholder={'Primary Email'}
readonly={readonly}
VariablePicker={VariablePicker}
/>
</FormNestedFieldInputContainer>
</FormFieldInputContainer>
);
};

View File

@ -0,0 +1,31 @@
import { Meta, StoryObj } from '@storybook/react';
import { within } from '@storybook/test';
import { FormEmailsFieldInput } from '../FormEmailsFieldInput';
const meta: Meta<typeof FormEmailsFieldInput> = {
title: 'UI/Data/Field/Form/Input/FormEmailsFieldInput',
component: FormEmailsFieldInput,
args: {},
argTypes: {},
};
export default meta;
type Story = StoryObj<typeof FormEmailsFieldInput>;
export const Default: Story = {
args: {
label: 'Emails',
defaultValue: {
primaryEmail: 'tim@twenty.com',
additionalEmails: [],
},
},
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
await canvas.findByText('Emails');
await canvas.findByText('Primary Email');
await canvas.findByText('tim@twenty.com');
},
};