Add ability to force picker width (#1093)

twentyhq · Aug 5, 2023 · 14f9e89 · 14f9e89
1 parent 35395c2
commit 14f9e89
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 7 deletions.
diff --git a/front/src/modules/companies/components/CompanyPickerCell.tsx b/front/src/modules/companies/components/CompanyPickerCell.tsx
@@ -12,13 +12,15 @@ export type OwnProps = {
   onSubmit: (newCompany: EntityForSelect | null) => void;
   onCancel?: () => void;
   createModeEnabled?: boolean;
+  width?: number;
 };
 
 export function CompanyPickerCell({
   companyId,
   onSubmit,
   onCancel,
   createModeEnabled,
+  width,
 }: OwnProps) {
   const [, setIsCreating] = useRecoilScopedState(isCreateModeScopedState);
 
@@ -46,6 +48,7 @@ export function CompanyPickerCell({
 
   return (
     <SingleEntitySelect
+      width={width}
       onCreate={createModeEnabled ? handleCreate : undefined}
       onCancel={onCancel}
       onEntitySelected={handleEntitySelected}

diff --git a/front/src/modules/companies/constants/companyViewFields.tsx b/front/src/modules/companies/constants/companyViewFields.tsx
@@ -32,6 +32,7 @@ export const companyViewFields: ViewFieldDefinition<ViewFieldMetadata>[] = [
       contentFieldName: 'name',
       relationType: Entity.Company,
     },
+    isVisible: true,
   } as ViewFieldDefinition<ViewFieldChipMetadata>,
   {
     id: 'domainName',
@@ -44,6 +45,7 @@ export const companyViewFields: ViewFieldDefinition<ViewFieldMetadata>[] = [
       fieldName: 'domainName',
       placeHolder: 'example.com',
     },
+    isVisible: true,
   } as ViewFieldDefinition<ViewFieldURLMetadata>,
   {
     id: 'accountOwner',
@@ -56,6 +58,7 @@ export const companyViewFields: ViewFieldDefinition<ViewFieldMetadata>[] = [
       fieldName: 'accountOwner',
       relationType: Entity.User,
     },
+    isVisible: true,
   } satisfies ViewFieldDefinition<ViewFieldRelationMetadata>,
   {
     id: 'createdAt',
@@ -67,6 +70,7 @@ export const companyViewFields: ViewFieldDefinition<ViewFieldMetadata>[] = [
       type: 'date',
       fieldName: 'createdAt',
     },
+    isVisible: true,
   } satisfies ViewFieldDefinition<ViewFieldDateMetadata>,
   {
     id: 'employees',
@@ -78,6 +82,7 @@ export const companyViewFields: ViewFieldDefinition<ViewFieldMetadata>[] = [
       type: 'number',
       fieldName: 'employees',
     },
+    isVisible: true,
   } satisfies ViewFieldDefinition<ViewFieldNumberMetadata>,
   {
     id: 'linkedin',
@@ -90,6 +95,7 @@ export const companyViewFields: ViewFieldDefinition<ViewFieldMetadata>[] = [
       fieldName: 'linkedinUrl',
       placeHolder: 'LinkedIn URL',
     },
+    isVisible: true,
   } satisfies ViewFieldDefinition<ViewFieldURLMetadata>,
   {
     id: 'address',
@@ -102,5 +108,6 @@ export const companyViewFields: ViewFieldDefinition<ViewFieldMetadata>[] = [
       fieldName: 'address',
       placeHolder: 'Address', // Hack: Fake character to prevent password-manager from filling the field
     },
+    isVisible: true,
   } satisfies ViewFieldDefinition<ViewFieldTextMetadata>,
 ];
diff --git a/front/src/modules/ui/dropdown/components/DropdownMenu.tsx b/front/src/modules/ui/dropdown/components/DropdownMenu.tsx
@@ -1,6 +1,9 @@
 import styled from '@emotion/styled';
 
-export const DropdownMenu = styled.div<{ disableBlur?: boolean }>`
+export const DropdownMenu = styled.div<{
+  disableBlur?: boolean;
+  width?: number;
+}>`
   backdrop-filter: ${({ disableBlur }) =>
     disableBlur ? 'none' : 'blur(20px)'};
 
@@ -13,7 +16,7 @@ export const DropdownMenu = styled.div<{ disableBlur?: boolean }>`
 
   flex-direction: column;
 
-  min-width: 160px;
-
   overflow: hidden;
+
+  width: ${({ width }) => width ?? 160}px;
 `;
diff --git a/front/src/modules/ui/input/relation-picker/components/SingleEntitySelect.tsx b/front/src/modules/ui/input/relation-picker/components/SingleEntitySelect.tsx
@@ -30,13 +30,15 @@ export function SingleEntitySelect<
   onEntitySelected,
   onCreate,
   onCancel,
+  width,
   disableBackgroundBlur = false,
 }: {
   onCancel?: () => void;
   onCreate?: () => void;
   entities: EntitiesForSingleEntitySelect<CustomEntityForSelect>;
   onEntitySelected: (entity: CustomEntityForSelect | null | undefined) => void;
   disableBackgroundBlur?: boolean;
+  width?: number;
 }) {
   const containerRef = useRef<HTMLDivElement>(null);
 
@@ -58,7 +60,11 @@ export function SingleEntitySelect<
   });
 
   return (
-    <DropdownMenu disableBlur={disableBackgroundBlur} ref={containerRef}>
+    <DropdownMenu
+      disableBlur={disableBackgroundBlur}
+      ref={containerRef}
+      width={width}
+    >
       <DropdownMenuSearch
         value={searchFilter}
         onChange={handleSearchFilterChange}

diff --git a/front/src/modules/ui/link/components/RawLink.tsx b/front/src/modules/ui/link/components/RawLink.tsx
@@ -20,8 +20,6 @@ const StyledClickable = styled.div`
 `;
 
 export function RawLink({ className, href, children, onClick }: OwnProps) {
-  console.log(children);
-
   return (
     <div>
       <StyledClickable className={className}>

diff --git a/...rc/modules/ui/table/editable-cell/type/components/GenericEditableRelationCellEditMode.tsx b/...rc/modules/ui/table/editable-cell/type/components/GenericEditableRelationCellEditMode.tsx
@@ -54,6 +54,7 @@ export function GenericEditableRelationCellEditMode({ viewField }: OwnProps) {
           companyId={fieldValueEntity?.id ?? null}
           onSubmit={handleEntitySubmit}
           onCancel={handleCancel}
+          width={viewField.columnSize}
         />
       );
     }
@@ -63,6 +64,7 @@ export function GenericEditableRelationCellEditMode({ viewField }: OwnProps) {
           userId={fieldValueEntity?.id ?? null}
           onSubmit={handleEntitySubmit}
           onCancel={handleCancel}
+          width={viewField.columnSize}
         />
       );
     }

diff --git a/front/src/modules/users/components/UserPicker.tsx b/front/src/modules/users/components/UserPicker.tsx
@@ -10,13 +10,14 @@ export type OwnProps = {
   userId: string;
   onSubmit: (newUser: EntityForSelect | null) => void;
   onCancel?: () => void;
+  width?: number;
 };
 
 type UserForSelect = EntityForSelect & {
   entityType: Entity.User;
 };
 
-export function UserPicker({ userId, onSubmit, onCancel }: OwnProps) {
+export function UserPicker({ userId, onSubmit, onCancel, width }: OwnProps) {
   const [searchFilter] = useRecoilScopedState(
     relationPickerSearchFilterScopedState,
   );
@@ -44,6 +45,7 @@ export function UserPicker({ userId, onSubmit, onCancel }: OwnProps) {
 
   return (
     <SingleEntitySelect
+      width={width}
       onEntitySelected={handleEntitySelected}
       onCancel={onCancel}
       entities={{