added new hoverText prop for span title

This commit is contained in:
Ollie Halliday committed 2022-07-04 16:06:51 +01:00
1 parent fdb3c7d1de
commit 1e8545aca8
2 files changed
+47 -43

No files matched your search

@@ -220,49 +220,51 @@ const TableEditorMenu: FC<Props> = ({
{schemaTables.map((table) => {
const isActive = Number(id) === table.id
return (
<ProductMenuItem
key={table.name}
url={`/project/${projectRef}/editor/${table.id}`}
name={table.name}
isActive={isActive}
action={
isActive && (
<Dropdown
size="small"
side="bottom"
align="start"
overlay={[
<Dropdown.Item
key="edit-table"
icon={<IconEdit size="tiny" />}
onClick={() => onEditTable(table)}
<ProductMenuItem
key={table.name}
url={`/project/${projectRef}/editor/${table.id}`}
name={table.name}
hoverText={table.comment ? table.comment : table.name}
isActive={isActive}
action={
isActive && (
<Dropdown
size="small"
side="bottom"
align="start"
overlay={[
<Dropdown.Item
key="edit-table"
icon={<IconEdit size="tiny" />}
onClick={() => onEditTable(table)}
>
Edit Table
</Dropdown.Item>,
<Dropdown.Item
key="duplicate-table"
icon={<IconCopy size="tiny" />}
onClick={() => onDuplicateTable(table)}
>
Duplicate Table
</Dropdown.Item>,
<Dropdown.Seperator />,
<Dropdown.Item
key="delete-table"
icon={<IconTrash size="tiny" />}
onClick={() => onDeleteTable(table)}
>
Delete Table
</Dropdown.Item>,
]}
>
Edit Table
</Dropdown.Item>,
<Dropdown.Item
key="duplicate-table"
icon={<IconCopy size="tiny" />}
onClick={() => onDuplicateTable(table)}
>
Duplicate Table
</Dropdown.Item>,
<Dropdown.Seperator />,
<Dropdown.Item
key="delete-table"
icon={<IconTrash size="tiny" />}
onClick={() => onDeleteTable(table)}
>
Delete Table
</Dropdown.Item>,
]}
>
<div className="text-scale-900 hover:text-scale-1200 transition-colors">
<IconChevronDown size={14} strokeWidth={2} />
</div>
</Dropdown>
)
}
/>
<div className="text-scale-900 hover:text-scale-1200 transition-colors">
<IconChevronDown size={14} strokeWidth={2} />
</div>
</Dropdown>
)
}
/>
)
})}
</div>
@@ -12,6 +12,7 @@ interface Props {
target?: '_blank' | '_self'
onClick?: () => void
textClassName?: string
hoverText?: string
}
const ProductMenuItem: FC<Props> = ({
@@ -24,12 +25,13 @@ const ProductMenuItem: FC<Props> = ({
target = '_self',
onClick,
textClassName = '',
hoverText = ''
}) => {
const menuItem = (
<Menu.Item icon={icon} rounded active={isActive} onClick={onClick}>
<div className="flex w-full items-center justify-between">
<span
title={typeof name === 'string' ? name : ''}
title={hoverText ? hoverText : typeof name === 'string' ? name : ''}
className={'flex items-center truncate ' + textClassName}
>
{name}