mirror of
https://github.com/twentyhq/twenty.git
synced 2025-01-03 17:53:58 +03:00
Add email composite field (#9061)
Same as links, only adding primary email
This commit is contained in:
parent
32e7eb79b9
commit
5961d26f91
@ -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;
|
||||||
};
|
};
|
||||||
|
@ -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>
|
||||||
|
);
|
||||||
|
};
|
@ -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');
|
||||||
|
},
|
||||||
|
};
|
Loading…
Reference in New Issue
Block a user