-
Notifications
You must be signed in to change notification settings - Fork 2.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Wrap Long text fields (textarea) (#8557)
Here we add the option for Text inputs to be wrapped, and to select on how many lines text should be displayed. Fix #7552 --------- Co-authored-by: guillim <[email protected]>
- Loading branch information
Showing
14 changed files
with
235 additions
and
27 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
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
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
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
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
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
91 changes: 91 additions & 0 deletions
91
...dules/settings/data-model/fields/forms/components/text/SettingsDataModelFieldTextForm.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,91 @@ | ||
| import { Controller, useFormContext } from 'react-hook-form'; | ||
|
|
||
| import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem'; | ||
| import { Select } from '@/ui/input/components/Select'; | ||
| import styled from '@emotion/styled'; | ||
| import { CardContent } from 'twenty-ui'; | ||
| import { z } from 'zod'; | ||
|
|
||
| const StyledFormCardTitle = styled.div` | ||
| color: ${({ theme }) => theme.font.color.light}; | ||
| font-size: ${({ theme }) => theme.font.size.xs}; | ||
| font-weight: ${({ theme }) => theme.font.weight.semiBold}; | ||
| margin-bottom: ${({ theme }) => theme.spacing(1)}; | ||
| `; | ||
|
|
||
| type SettingsDataModelFieldTextFormProps = { | ||
| disabled?: boolean; | ||
| fieldMetadataItem: Pick< | ||
| FieldMetadataItem, | ||
| 'icon' | 'label' | 'type' | 'defaultValue' | 'settings' | ||
| >; | ||
| }; | ||
|
|
||
| export const textFieldDefaultValueSchema = z.object({ | ||
| displayedMaxRows: z.number().nullable(), | ||
| }); | ||
|
|
||
| export const settingsDataModelFieldtextFormSchema = z.object({ | ||
| settings: textFieldDefaultValueSchema, | ||
| }); | ||
|
|
||
| export type SettingsDataModelFieldTextFormValues = z.infer< | ||
| typeof settingsDataModelFieldtextFormSchema | ||
| >; | ||
|
|
||
| export const SettingsDataModelFieldTextForm = ({ | ||
| disabled, | ||
| fieldMetadataItem, | ||
| }: SettingsDataModelFieldTextFormProps) => { | ||
| const { control } = useFormContext<SettingsDataModelFieldTextFormValues>(); | ||
| return ( | ||
| <CardContent> | ||
| <Controller | ||
| name="settings" | ||
| defaultValue={{ | ||
| displayedMaxRows: fieldMetadataItem?.settings?.displayedMaxRows || 0, | ||
| }} | ||
| control={control} | ||
| render={({ field: { onChange, value } }) => { | ||
| const displayedMaxRows = value?.displayedMaxRows ?? 0; | ||
|
|
||
| return ( | ||
| <> | ||
| <StyledFormCardTitle>Wrap on record pages</StyledFormCardTitle> | ||
| <Select | ||
| disabled={disabled} | ||
| dropdownId="selectTextWrap" | ||
| options={[ | ||
| { | ||
| label: 'Deactivated', | ||
| value: 0, | ||
| }, | ||
| { | ||
| label: 'First 2 lines', | ||
| value: 2, | ||
| }, | ||
| { | ||
| label: 'First 5 lines', | ||
| value: 5, | ||
| }, | ||
| { | ||
| label: 'First 10 lines', | ||
| value: 10, | ||
| }, | ||
| { | ||
| label: 'All lines', | ||
| value: 99, | ||
| }, | ||
| ]} | ||
| value={displayedMaxRows} | ||
| onChange={(value) => onChange({ displayedMaxRows: value })} | ||
| withSearchInput={false} | ||
| dropdownWidthAuto={true} | ||
| /> | ||
| </> | ||
| ); | ||
| }} | ||
| /> | ||
| </CardContent> | ||
| ); | ||
| }; |
45 changes: 45 additions & 0 deletions
45
...gs/data-model/fields/forms/components/text/SettingsDataModelFieldTextSettingsFormCard.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,45 @@ | ||
| import styled from '@emotion/styled'; | ||
|
|
||
| import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem'; | ||
| import { SettingsDataModelPreviewFormCard } from '@/settings/data-model/components/SettingsDataModelPreviewFormCard'; | ||
|
|
||
| import { SettingsDataModelFieldTextForm } from '@/settings/data-model/fields/forms/components/text/SettingsDataModelFieldTextForm'; | ||
| import { | ||
| SettingsDataModelFieldPreviewCard, | ||
| SettingsDataModelFieldPreviewCardProps, | ||
| } from '@/settings/data-model/fields/preview/components/SettingsDataModelFieldPreviewCard'; | ||
|
|
||
| type SettingsDataModelFieldTextSettingsFormCardProps = { | ||
| disabled?: boolean; | ||
| fieldMetadataItem: Pick< | ||
| FieldMetadataItem, | ||
| 'icon' | 'label' | 'type' | 'defaultValue' | ||
| >; | ||
| } & Pick<SettingsDataModelFieldPreviewCardProps, 'objectMetadataItem'>; | ||
|
|
||
| const StyledFieldPreviewCard = styled(SettingsDataModelFieldPreviewCard)` | ||
| flex: 1 1 100%; | ||
| `; | ||
|
|
||
| export const SettingsDataModelFieldTextSettingsFormCard = ({ | ||
| disabled, | ||
| fieldMetadataItem, | ||
| objectMetadataItem, | ||
| }: SettingsDataModelFieldTextSettingsFormCardProps) => { | ||
| return ( | ||
| <SettingsDataModelPreviewFormCard | ||
| preview={ | ||
| <StyledFieldPreviewCard | ||
| fieldMetadataItem={fieldMetadataItem} | ||
| objectMetadataItem={objectMetadataItem} | ||
| /> | ||
| } | ||
| form={ | ||
| <SettingsDataModelFieldTextForm | ||
| disabled={disabled} | ||
| fieldMetadataItem={fieldMetadataItem} | ||
| /> | ||
| } | ||
| /> | ||
| ); | ||
| }; |
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
3 changes: 0 additions & 3 deletions
3
packages/twenty-front/src/modules/ui/field/display/components/DoubleTextDisplay.tsx
This file was deleted.
Oops, something went wrong.
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
Oops, something went wrong.