Refactor spreadsheet import (#11250)
Mostly renaming objects to avoid conflicts (it was painful because names were too generic so you could cmd+replace easily) Also refactoring `useBuildAvailableFieldsForImport`
This commit is contained in:
@ -1,9 +1,7 @@
|
||||
import { Tag, THEME_COMMON } from 'twenty-ui';
|
||||
import { SelectOption, Tag, THEME_COMMON } from 'twenty-ui';
|
||||
|
||||
import { FieldMultiSelectValue } from '@/object-record/record-field/types/FieldMetadata';
|
||||
import { SelectOption } from '@/spreadsheet-import/types';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
const spacing1 = THEME_COMMON.spacing(1);
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
@ -40,7 +38,7 @@ export const MultiSelectDisplay = ({
|
||||
key={index}
|
||||
color={selectedOption.color ?? 'transparent'}
|
||||
text={selectedOption.label}
|
||||
Icon={selectedOption.icon ?? undefined}
|
||||
Icon={selectedOption.Icon ?? undefined}
|
||||
/>
|
||||
))}
|
||||
</StyledContainer>
|
||||
|
||||
@ -3,7 +3,6 @@ import { useRecoilValue } from 'recoil';
|
||||
import { Key } from 'ts-key-enum';
|
||||
|
||||
import { FieldMultiSelectValue } from '@/object-record/record-field/types/FieldMetadata';
|
||||
import { SelectOption } from '@/spreadsheet-import/types';
|
||||
import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
|
||||
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
|
||||
import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
|
||||
@ -13,9 +12,9 @@ import { useSelectableListStates } from '@/ui/layout/selectable-list/hooks/inter
|
||||
import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
|
||||
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
|
||||
import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
|
||||
import { MenuItemMultiSelectTag } from 'twenty-ui';
|
||||
import { turnIntoEmptyStringIfWhitespacesOnly } from '~/utils/string/turnIntoEmptyStringIfWhitespacesOnly';
|
||||
import { isDefined } from 'twenty-shared/utils';
|
||||
import { MenuItemMultiSelectTag, SelectOption } from 'twenty-ui';
|
||||
import { turnIntoEmptyStringIfWhitespacesOnly } from '~/utils/string/turnIntoEmptyStringIfWhitespacesOnly';
|
||||
|
||||
type MultiSelectInputProps = {
|
||||
selectableListComponentInstanceId: string;
|
||||
@ -128,7 +127,7 @@ export const MultiSelectInput = ({
|
||||
selected={values?.includes(option.value) || false}
|
||||
text={option.label}
|
||||
color={option.color ?? 'transparent'}
|
||||
Icon={option.icon ?? undefined}
|
||||
Icon={option.Icon ?? undefined}
|
||||
onClick={() =>
|
||||
onOptionSelected(formatNewSelectedOptions(option.value))
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { SelectOption } from '@/spreadsheet-import/types';
|
||||
import { SelectInput as SelectBaseInput } from '@/ui/input/components/SelectInput';
|
||||
import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
|
||||
import { SelectOption } from 'twenty-ui';
|
||||
|
||||
type SelectInputProps = {
|
||||
selectableListComponentInstanceId: string;
|
||||
|
||||
@ -1,6 +1,11 @@
|
||||
import styled from '@emotion/styled';
|
||||
import { MouseEvent, useMemo, useRef, useState } from 'react';
|
||||
import { IconComponent, MenuItem, MenuItemSelect } from 'twenty-ui';
|
||||
import {
|
||||
IconComponent,
|
||||
MenuItem,
|
||||
MenuItemSelect,
|
||||
SelectOption,
|
||||
} from 'twenty-ui';
|
||||
|
||||
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
|
||||
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
|
||||
@ -9,14 +14,8 @@ import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownM
|
||||
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
|
||||
|
||||
import { SelectControl } from '@/ui/input/components/SelectControl';
|
||||
import { SelectHotkeyScope } from '../types/SelectHotkeyScope';
|
||||
import { isDefined } from 'twenty-shared/utils';
|
||||
|
||||
export type SelectOption<Value extends string | number | boolean | null> = {
|
||||
value: Value;
|
||||
label: string;
|
||||
Icon?: IconComponent;
|
||||
};
|
||||
import { SelectHotkeyScope } from '../types/SelectHotkeyScope';
|
||||
|
||||
export type SelectSizeVariant = 'small' | 'default';
|
||||
|
||||
|
||||
@ -1,8 +1,12 @@
|
||||
import { SelectOption, SelectSizeVariant } from '@/ui/input/components/Select';
|
||||
import { SelectSizeVariant } from '@/ui/input/components/Select';
|
||||
import { useTheme } from '@emotion/react';
|
||||
import styled from '@emotion/styled';
|
||||
import { IconChevronDown, OverflowingTextWithTooltip } from 'twenty-ui';
|
||||
import { isDefined } from 'twenty-shared/utils';
|
||||
import {
|
||||
IconChevronDown,
|
||||
OverflowingTextWithTooltip,
|
||||
SelectOption,
|
||||
} from 'twenty-ui';
|
||||
|
||||
const StyledControlContainer = styled.div<{
|
||||
disabled?: boolean;
|
||||
|
||||
@ -1,5 +1,3 @@
|
||||
import { SelectOption } from '@/spreadsheet-import/types';
|
||||
|
||||
import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
|
||||
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
|
||||
import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
|
||||
@ -8,8 +6,8 @@ import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
|
||||
import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
|
||||
import { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { Key } from 'ts-key-enum';
|
||||
import { MenuItemSelectTag, TagColor } from 'twenty-ui';
|
||||
import { isDefined } from 'twenty-shared/utils';
|
||||
import { MenuItemSelectTag, SelectOption, TagColor } from 'twenty-ui';
|
||||
|
||||
interface SelectInputProps {
|
||||
onOptionSelected: (selectedOption: SelectOption) => void;
|
||||
@ -125,7 +123,7 @@ export const SelectInput = ({
|
||||
text={option.label}
|
||||
color={(option.color as TagColor) ?? 'transparent'}
|
||||
onClick={() => handleOptionChange(option)}
|
||||
LeftIcon={option.icon}
|
||||
LeftIcon={option.Icon}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import { useMemo } from 'react';
|
||||
import { IconCircleOff, IconComponentProps } from 'twenty-ui';
|
||||
import { IconCircleOff, IconComponentProps, SelectOption } from 'twenty-ui';
|
||||
|
||||
import { SELECT_COUNTRY_DROPDOWN_ID } from '@/ui/input/components/internal/country/constants/SelectCountryDropdownId';
|
||||
import { useCountries } from '@/ui/input/components/internal/hooks/useCountries';
|
||||
import { Select, SelectOption } from '@/ui/input/components/Select';
|
||||
import { Select } from '@/ui/input/components/Select';
|
||||
|
||||
export const CountrySelect = ({
|
||||
label,
|
||||
|
||||
Reference in New Issue
Block a user