This is an automated email from the ASF dual-hosted git repository.
diegopucci pushed a commit to branch feat/d2d-charts-crud-filter-col
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to
refs/heads/feat/d2d-charts-crud-filter-col by this push:
new 3dfa0de32f Use useTruncation
3dfa0de32f is described below
commit 3dfa0de32f373fe52273ba8c522e211eea795cdb
Author: geido <[email protected]>
AuthorDate: Fri Oct 7 15:01:05 2022 +0300
Use useTruncation
---
.../src/components/ListView/CrossLinks.tsx | 69 ++++++++++++++--------
.../nativeFilters/FilterCard/DependenciesRow.tsx | 2 +-
.../nativeFilters/FilterCard/NameRow.tsx | 2 +-
.../nativeFilters/FilterCard/ScopeRow.tsx | 2 +-
.../useTruncation/index.ts} | 2 +
5 files changed, 49 insertions(+), 28 deletions(-)
diff --git a/superset-frontend/src/components/ListView/CrossLinks.tsx
b/superset-frontend/src/components/ListView/CrossLinks.tsx
index 34da77fb63..99bc83cb57 100644
--- a/superset-frontend/src/components/ListView/CrossLinks.tsx
+++ b/superset-frontend/src/components/ListView/CrossLinks.tsx
@@ -16,10 +16,11 @@
* specific language governing permissions and limitations
* under the License.
*/
-import React from 'react';
+import React, { useRef } from 'react';
import { styled, t } from '@superset-ui/core';
import { Tooltip } from 'src/components/Tooltip';
import { Link } from 'react-router-dom';
+import { useTruncation } from 'src/hooks/useTruncation';
export type CrossLinkProps = {
title: string;
@@ -33,21 +34,29 @@ interface CrossLinksProps {
}
const StyledCrossLinks = styled.div`
- color: ${({ theme }) => theme.colors.primary.dark1};
- cursor: pointer;
+ ${({ theme }) => `
+ color: ${theme.colors.primary.dark1};
+ cursor: pointer;
+ max-width: calc(100% - 20px);
- .ant-tooltip-open {
- max-width: 100%;
- }
+ .ant-tooltip-open {
+ width: 100%;
+ }
- .truncated {
- max-width: calc(100% - 20px);
- white-space: nowrap;
- display: inline-block;
- overflow: hidden;
- vertical-align: bottom;
- text-overflow: ellipsis;
- }
+ .truncated {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ display: inline-block;
+ width: 100%;
+ vertical-align: bottom;
+ }
+
+ .count {
+ color: ${theme.colors.grayscale.base};
+ font-weight: ${theme.typography.weights.bold};
+ }
+ `}
`;
const StyledLinkedTooltip = styled.div`
@@ -63,6 +72,9 @@ export default function CrossLinks({
maxLinks = 50,
linkPrefix = '/superset/dashboard/',
}: CrossLinksProps) {
+ const crossLinksRef = useRef<HTMLDivElement>(null);
+ const [elementsTruncated, hasHiddenElements] = useTruncation(crossLinksRef);
+
return (
<StyledCrossLinks>
{crossLinks.length > 1 ? (
@@ -75,6 +87,7 @@ export default function CrossLinks({
key={link.id}
to={linkPrefix + link.id}
target="_blank"
+ rel="noreferer noopener"
>
{link.title}
</Link>
@@ -85,19 +98,25 @@ export default function CrossLinks({
</StyledLinkedTooltip>
}
>
- <span className="truncated">
- {crossLinks.map(link => link.title).join(', ')}
- </span>{' '}
- +{crossLinks.length}
+ <span className="truncated" ref={crossLinksRef}>
+ {crossLinks.map((element, index) => (
+ <span>{index === 0 ? element.title : `, ${element.title}`}</span>
+ ))}
+ </span>
+ {hasHiddenElements && (
+ <span className="count">+{elementsTruncated}</span>
+ )}
</Tooltip>
) : (
- <span>
- {crossLinks[0] && (
- <Link to={linkPrefix + crossLinks[0].id} target="_blank">
- {crossLinks[0].title}
- </Link>
- )}
- </span>
+ crossLinks[0] && (
+ <Link
+ to={linkPrefix + crossLinks[0].id}
+ target="_blank"
+ rel="noreferer noopener"
+ >
+ {crossLinks[0].title}
+ </Link>
+ )
)}
</StyledCrossLinks>
);
diff --git
a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/DependenciesRow.tsx
b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/DependenciesRow.tsx
index 18a1c257b4..abbaa1e633 100644
---
a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/DependenciesRow.tsx
+++
b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/DependenciesRow.tsx
@@ -21,6 +21,7 @@ import { useDispatch } from 'react-redux';
import { css, t, useTheme } from '@superset-ui/core';
import { setDirectPathToChild } from 'src/dashboard/actions/dashboardState';
import Icons from 'src/components/Icons';
+import { useTruncation } from 'src/hooks/useTruncation';
import {
DependencyItem,
Row,
@@ -30,7 +31,6 @@ import {
TooltipList,
} from './Styles';
import { useFilterDependencies } from './useFilterDependencies';
-import { useTruncation } from './useTruncation';
import { DependencyValueProps, FilterCardRowProps } from './types';
import { TooltipWithTruncation } from './TooltipWithTruncation';
diff --git
a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/NameRow.tsx
b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/NameRow.tsx
index 05cb811948..f6268296ef 100644
---
a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/NameRow.tsx
+++
b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/NameRow.tsx
@@ -19,9 +19,9 @@
import React, { useRef } from 'react';
import { css, SupersetTheme } from '@superset-ui/core';
import Icons from 'src/components/Icons';
+import { useTruncation } from 'src/hooks/useTruncation';
import { Row, FilterName } from './Styles';
import { FilterCardRowProps } from './types';
-import { useTruncation } from './useTruncation';
import { TooltipWithTruncation } from './TooltipWithTruncation';
export const NameRow = ({ filter }: FilterCardRowProps) => {
diff --git
a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/ScopeRow.tsx
b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/ScopeRow.tsx
index 66656f0ba5..6a672ed42c 100644
---
a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/ScopeRow.tsx
+++
b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/ScopeRow.tsx
@@ -18,6 +18,7 @@
*/
import React, { useMemo, useRef } from 'react';
import { t } from '@superset-ui/core';
+import { useTruncation } from 'src/hooks/useTruncation';
import { useFilterScope } from './useFilterScope';
import {
Row,
@@ -27,7 +28,6 @@ import {
TooltipList,
TooltipSectionLabel,
} from './Styles';
-import { useTruncation } from './useTruncation';
import { FilterCardRowProps } from './types';
import { TooltipWithTruncation } from './TooltipWithTruncation';
diff --git
a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/useTruncation.ts
b/superset-frontend/src/hooks/useTruncation/index.ts
similarity index 99%
rename from
superset-frontend/src/dashboard/components/nativeFilters/FilterCard/useTruncation.ts
rename to superset-frontend/src/hooks/useTruncation/index.ts
index a4a893463f..d000a6277a 100644
---
a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/useTruncation.ts
+++ b/superset-frontend/src/hooks/useTruncation/index.ts
@@ -61,12 +61,14 @@ export const useTruncation = (elementRef:
RefObject<HTMLElement>) => {
// "..." is around 6px wide
const maxWidth = clientWidth - 6;
const elementsCount = childNodes.length;
+
let width = 0;
let i = 0;
while (width < maxWidth) {
width += (childNodes[i] as HTMLElement).offsetWidth;
i += 1;
}
+ console.log('i', i);
if (i === elementsCount) {
setElementsTruncated(1);
setHasHiddenElements(false);
