paulmataruso/chartdb
1
0
Fork 0
mirror of https://github.com/chartdb/chartdb.git synced 2025-11-02 04:53:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(custom_types): fix display custom types in select box (#737)

Browse Source
This commit is contained in:
Guy Ben-Aharon
2025-06-05 15:21:55 +03:00
committed by GitHub
parent c6788b4917
commit 24be28a662
2 changed files with 47 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/select-box/select-box.tsx
View File

@@ -418,27 +418,22 @@ export const SelectBox = React.forwardRef<HTMLInputElement, SelectBoxProps>(
<ScrollArea>
<div className="max-h-64 w-full">
<CommandGroup>
<CommandList className="max-h-fit w-full">
{hasGroups
? Object.entries(groups).map(
([
groupName,
groupOptions,
]) => (
<CommandGroup
key={groupName}
heading={groupName}
>
{groupOptions.map(
renderOption
)}
</CommandGroup>
)
<CommandList className="max-h-fit w-full">
{hasGroups
? Object.entries(groups).map(
([groupName, groupOptions]) => (
<CommandGroup
key={groupName}
heading={groupName}
>
{groupOptions.map(
renderOption
)}
</CommandGroup>
)
: options.map(renderOption)}
</CommandList>
</CommandGroup>
)
: options.map(renderOption)}
</CommandList>
</div>
</ScrollArea>
</Command>

42
src/pages/editor-page/side-panel/tables-section/table-list/table-list-item/table-list-item-content/table-field/table-field.tsx
View File

@@ -1,4 +1,4 @@
import React, { useCallback } from 'react';
import React, { useCallback, useMemo } from 'react';
import { GripVertical, KeyRound } from 'lucide-react';
import { Input } from '@/components/input/input';
import type { DBField } from '@/lib/domain/db-field';
@@ -34,20 +34,42 @@ export const TableField: React.FC<TableFieldProps> = ({
updateField,
removeField,
}) => {
const { databaseType } = useChartDB();
const { databaseType, customTypes } = useChartDB();
const { t } = useTranslation();
const { attributes, listeners, setNodeRef, transform, transition } =
useSortable({ id: field.id });
const dataFieldOptions: SelectBoxOption[] = sortedDataTypeMap[
databaseType
].map((type) => ({
label: type.name,
value: type.id,
regex: type.hasCharMaxLength ? `^${type.name}\\(\\d+\\)$` : undefined,
extractRegex: type.hasCharMaxLength ? /\((\d+)\)/ : undefined,
}));
const dataFieldOptions = useMemo(() => {
const standardTypes: SelectBoxOption[] = sortedDataTypeMap[
databaseType
].map((type) => ({
label: type.name,
value: type.id,
regex: type.hasCharMaxLength
? `^${type.name}\\(\\d+\\)$`
: undefined,
extractRegex: type.hasCharMaxLength ? /\((\d+)\)/ : undefined,
group: customTypes?.length ? 'Standard Types' : undefined,
}));
if (!customTypes?.length) {
return standardTypes;
}
// Add custom types as options
const customTypeOptions: SelectBoxOption[] = customTypes.map(
(type) => ({
label: type.name,
value: type.name,
description:
type.kind === 'enum' ? `${type.values?.join(' | ')}` : '',
group: 'Custom Types',
})
);
return [...standardTypes, ...customTypeOptions];
}, [databaseType, customTypes]);
const onChangeDataType = useCallback<
NonNullable<SelectBoxProps['onChange']>