Raphaël Bosi
c596a5e342
## Description Promotes the next-gen UI library (formerly `twenty-new-ui`) to the name **`twenty-ui`** (v0.1.0, publishable) and renames the old package to **`twenty-ui-deprecated`**. Rewrites ~1,730 `twenty-ui` imports → `twenty-ui-deprecated`, updates all configs/CI/Docker/deps, and migrates twenty-front's `Toggle` to the new package (first consumer) as a drop-in. ## Next steps - Wire the `ui/v*` publish dispatch (`cd-deploy-tag.yaml` + `.yarnrc.yml`), then tag `ui/v0.1.0` to publish. - Continue migrating components from `twenty-ui-deprecated` → `twenty-ui`.
91 lines
3.2 KiB
TypeScript
91 lines
3.2 KiB
TypeScript
import { type FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
|
|
import { type SpreadsheetImportFieldOption } from '@/spreadsheet-import/types/SpreadsheetImportFieldOption';
|
|
import { getSubFieldOptions } from '@/spreadsheet-import/utils/spreadsheetImportGetSubFieldOptions';
|
|
import { hasNestedFields } from '@/spreadsheet-import/utils/spreadsheetImportHasNestedFields';
|
|
import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
|
|
import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader';
|
|
import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
|
|
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
|
|
import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
|
|
import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
|
|
import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
|
|
import { useState } from 'react';
|
|
import {
|
|
IconChevronLeft,
|
|
OverflowingTextWithTooltip,
|
|
} from 'twenty-ui-deprecated/display';
|
|
import { MenuItem } from 'twenty-ui-deprecated/navigation';
|
|
|
|
export const MatchColumnSelectSubFieldSelectDropdownContent = ({
|
|
fieldMetadataItem,
|
|
onSubFieldSelect,
|
|
options,
|
|
onBack,
|
|
}: {
|
|
fieldMetadataItem: FieldMetadataItem;
|
|
onSubFieldSelect: (subFieldNameSelected: string) => void;
|
|
options: readonly Readonly<SpreadsheetImportFieldOption>[];
|
|
onBack: () => void;
|
|
}) => {
|
|
const [searchFilter, setSearchFilter] = useState('');
|
|
|
|
const handleFilterChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
const value = event.currentTarget.value;
|
|
|
|
setSearchFilter(value);
|
|
};
|
|
|
|
const handleSubFieldSelect = (subFieldName: string) => {
|
|
onSubFieldSelect(subFieldName);
|
|
};
|
|
|
|
const handleSubMenuBack = () => {
|
|
setSearchFilter('');
|
|
onBack();
|
|
};
|
|
|
|
if (!hasNestedFields(fieldMetadataItem)) {
|
|
return <></>;
|
|
}
|
|
|
|
const subFieldOptions = getSubFieldOptions(
|
|
fieldMetadataItem,
|
|
options,
|
|
searchFilter,
|
|
);
|
|
|
|
return (
|
|
<DropdownContent widthInPixels={GenericDropdownContentWidth.ExtraLarge}>
|
|
<DropdownMenuHeader
|
|
StartComponent={
|
|
<DropdownMenuHeaderLeftComponent
|
|
onClick={handleSubMenuBack}
|
|
Icon={IconChevronLeft}
|
|
/>
|
|
}
|
|
>
|
|
<OverflowingTextWithTooltip text={fieldMetadataItem.label} />
|
|
</DropdownMenuHeader>
|
|
<DropdownMenuSearchInput
|
|
value={searchFilter}
|
|
onChange={handleFilterChange}
|
|
autoFocus
|
|
/>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItemsContainer hasMaxHeight>
|
|
{subFieldOptions.map(
|
|
({ value, shortLabelForNestedField, Icon, disabled }) => (
|
|
<MenuItem
|
|
key={value}
|
|
onClick={() => handleSubFieldSelect(value)}
|
|
LeftIcon={Icon}
|
|
text={shortLabelForNestedField}
|
|
disabled={disabled}
|
|
/>
|
|
),
|
|
)}
|
|
</DropdownMenuItemsContainer>
|
|
</DropdownContent>
|
|
);
|
|
};
|