-
Notifications
You must be signed in to change notification settings - Fork 2.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add address composite form field (#9022)
- Create FormCountrySelectInput using the existing FormSelectFieldInput - Create AddressFormFieldInput component - Fix FormSelectFieldInput dropdown + add leftIcon <img width="554" alt="Capture d’écran 2024-12-11 à 15 56 32" src="https://github.com/user-attachments/assets/c3019f29-af76-44e1-96bd-a0c6283674e1" />
- Loading branch information
Showing
14 changed files
with
313 additions
and
66 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
94 changes: 94 additions & 0 deletions
94
...nt/src/modules/object-record/record-field/form-types/components/FormAddressFieldInput.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,94 @@ | ||
| import { FormCountrySelectInput } from '@/object-record/record-field/form-types/components/FormCountrySelectInput'; | ||
| import { FormTextFieldInput } from '@/object-record/record-field/form-types/components/FormTextFieldInput'; | ||
| import { StyledFormCompositeFieldInputContainer } from '@/object-record/record-field/form-types/components/StyledFormCompositeFieldInputContainer'; | ||
| import { StyledFormFieldInputContainer } from '@/object-record/record-field/form-types/components/StyledFormFieldInputContainer'; | ||
| import { VariablePickerComponent } from '@/object-record/record-field/form-types/types/VariablePickerComponent'; | ||
| import { FieldAddressDraftValue } from '@/object-record/record-field/types/FieldInputDraftValue'; | ||
| import { FieldAddressValue } from '@/object-record/record-field/types/FieldMetadata'; | ||
| import { InputLabel } from '@/ui/input/components/InputLabel'; | ||
|
|
||
| type FormAddressFieldInputProps = { | ||
| label?: string; | ||
| defaultValue: FieldAddressDraftValue | null; | ||
| onPersist: (value: FieldAddressValue) => void; | ||
| VariablePicker?: VariablePickerComponent; | ||
| readonly?: boolean; | ||
| }; | ||
|
|
||
| export const FormAddressFieldInput = ({ | ||
| label, | ||
| defaultValue, | ||
| onPersist, | ||
| readonly, | ||
| VariablePicker, | ||
| }: FormAddressFieldInputProps) => { | ||
| const handleChange = | ||
| (field: keyof FieldAddressDraftValue) => (updatedAddressPart: string) => { | ||
| const updatedAddress = { | ||
| addressStreet1: defaultValue?.addressStreet1 ?? '', | ||
| addressStreet2: defaultValue?.addressStreet2 ?? '', | ||
| addressCity: defaultValue?.addressCity ?? '', | ||
| addressState: defaultValue?.addressState ?? '', | ||
| addressPostcode: defaultValue?.addressPostcode ?? '', | ||
| addressCountry: defaultValue?.addressCountry ?? '', | ||
| addressLat: defaultValue?.addressLat ?? null, | ||
| addressLng: defaultValue?.addressLng ?? null, | ||
| [field]: updatedAddressPart, | ||
| }; | ||
| onPersist(updatedAddress); | ||
| }; | ||
|
|
||
| return ( | ||
| <StyledFormFieldInputContainer> | ||
| {label ? <InputLabel>{label}</InputLabel> : null} | ||
| <StyledFormCompositeFieldInputContainer> | ||
| <FormTextFieldInput | ||
| label="Address 1" | ||
| defaultValue={defaultValue?.addressStreet1 ?? ''} | ||
| onPersist={handleChange('addressStreet1')} | ||
| readonly={readonly} | ||
| VariablePicker={VariablePicker} | ||
| placeholder="Street address" | ||
| /> | ||
| <FormTextFieldInput | ||
| label="Address 2" | ||
| defaultValue={defaultValue?.addressStreet2 ?? ''} | ||
| onPersist={handleChange('addressStreet2')} | ||
| readonly={readonly} | ||
| VariablePicker={VariablePicker} | ||
| placeholder="Street address 2" | ||
| /> | ||
| <FormTextFieldInput | ||
| label="City" | ||
| defaultValue={defaultValue?.addressCity ?? ''} | ||
| onPersist={handleChange('addressCity')} | ||
| readonly={readonly} | ||
| VariablePicker={VariablePicker} | ||
| placeholder="City" | ||
| /> | ||
| <FormTextFieldInput | ||
| label="State" | ||
| defaultValue={defaultValue?.addressState ?? ''} | ||
| onPersist={handleChange('addressState')} | ||
| readonly={readonly} | ||
| VariablePicker={VariablePicker} | ||
| placeholder="State" | ||
| /> | ||
| <FormTextFieldInput | ||
| label="Post Code" | ||
| defaultValue={defaultValue?.addressPostcode ?? ''} | ||
| onPersist={handleChange('addressPostcode')} | ||
| readonly={readonly} | ||
| VariablePicker={VariablePicker} | ||
| placeholder="Post Code" | ||
| /> | ||
| <FormCountrySelectInput | ||
| selectedCountryName={defaultValue?.addressCountry ?? ''} | ||
| onPersist={handleChange('addressCountry')} | ||
| readonly={readonly} | ||
| VariablePicker={VariablePicker} | ||
| /> | ||
| </StyledFormCompositeFieldInputContainer> | ||
| </StyledFormFieldInputContainer> | ||
| ); | ||
| }; |
63 changes: 63 additions & 0 deletions
63
...t/src/modules/object-record/record-field/form-types/components/FormCountrySelectInput.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,63 @@ | ||
| import { useMemo } from 'react'; | ||
| import { IconCircleOff, IconComponentProps } from 'twenty-ui'; | ||
|
|
||
| import { FormSelectFieldInput } from '@/object-record/record-field/form-types/components/FormSelectFieldInput'; | ||
| import { VariablePickerComponent } from '@/object-record/record-field/form-types/types/VariablePickerComponent'; | ||
| import { SelectOption } from '@/spreadsheet-import/types'; | ||
| import { useCountries } from '@/ui/input/components/internal/hooks/useCountries'; | ||
|
|
||
| export const FormCountrySelectInput = ({ | ||
| selectedCountryName, | ||
| onPersist, | ||
| readonly = false, | ||
| VariablePicker, | ||
| }: { | ||
| selectedCountryName: string; | ||
| onPersist: (countryCode: string) => void; | ||
| readonly?: boolean; | ||
| VariablePicker?: VariablePickerComponent; | ||
| }) => { | ||
| const countries = useCountries(); | ||
|
|
||
| const options: SelectOption[] = useMemo(() => { | ||
| const countryList = countries.map<SelectOption>( | ||
| ({ countryName, Flag }) => ({ | ||
| label: countryName, | ||
| value: countryName, | ||
| color: 'transparent', | ||
| icon: (props: IconComponentProps) => | ||
| Flag({ width: props.size, height: props.size }), | ||
| }), | ||
| ); | ||
| return [ | ||
| { | ||
| label: 'No country', | ||
| value: '', | ||
| icon: IconCircleOff, | ||
| }, | ||
| ...countryList, | ||
| ]; | ||
| }, [countries]); | ||
|
|
||
| const onChange = (countryCode: string | null) => { | ||
| if (readonly) { | ||
| return; | ||
| } | ||
|
|
||
| if (countryCode === null) { | ||
| onPersist(''); | ||
| } else { | ||
| onPersist(countryCode); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <FormSelectFieldInput | ||
| label="Country" | ||
| onPersist={onChange} | ||
| options={options} | ||
| defaultValue={selectedCountryName} | ||
| VariablePicker={VariablePicker} | ||
| /> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
37 changes: 37 additions & 0 deletions
37
...t-record/record-field/form-types/components/__stories__/FormAddressFieldInput.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| import { Meta, StoryObj } from '@storybook/react'; | ||
| import { within } from '@storybook/test'; | ||
| import { FormAddressFieldInput } from '../FormAddressFieldInput'; | ||
|
|
||
| const meta: Meta<typeof FormAddressFieldInput> = { | ||
| title: 'UI/Data/Field/Form/Input/FormAddressFieldInput', | ||
| component: FormAddressFieldInput, | ||
| args: {}, | ||
| argTypes: {}, | ||
| }; | ||
|
|
||
| export default meta; | ||
|
|
||
| type Story = StoryObj<typeof FormAddressFieldInput>; | ||
|
|
||
| export const Default: Story = { | ||
| args: { | ||
| label: 'Address', | ||
| defaultValue: { | ||
| addressStreet1: '123 Main St', | ||
| addressStreet2: 'Apt 123', | ||
| addressCity: 'Springfield', | ||
| addressState: 'IL', | ||
| addressCountry: 'US', | ||
| addressPostcode: '12345', | ||
| addressLat: 39.781721, | ||
| addressLng: -89.650148, | ||
| }, | ||
| }, | ||
| play: async ({ canvasElement }) => { | ||
| const canvas = within(canvasElement); | ||
|
|
||
| await canvas.findByText('123 Main St'); | ||
| await canvas.findByText('Address'); | ||
| await canvas.findByText('Post Code'); | ||
| }, | ||
| }; |
26 changes: 26 additions & 0 deletions
26
...-record/record-field/form-types/components/__stories__/FormCountrySelectInput.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import { Meta, StoryObj } from '@storybook/react'; | ||
| import { within } from '@storybook/test'; | ||
| import { FormCountrySelectInput } from '../FormCountrySelectInput'; | ||
|
|
||
| const meta: Meta<typeof FormCountrySelectInput> = { | ||
| title: 'UI/Data/Field/Form/Input/FormCountrySelectInput', | ||
| component: FormCountrySelectInput, | ||
| args: {}, | ||
| argTypes: {}, | ||
| }; | ||
|
|
||
| export default meta; | ||
|
|
||
| type Story = StoryObj<typeof FormCountrySelectInput>; | ||
|
|
||
| export const Default: Story = { | ||
| args: { | ||
| selectedCountryName: 'Canada', | ||
| }, | ||
| play: async ({ canvasElement }) => { | ||
| const canvas = within(canvasElement); | ||
|
|
||
| await canvas.findByText('Country'); | ||
| await canvas.findByText('Canada'); | ||
| }, | ||
| }; |
Oops, something went wrong.